[Error/Ionic 5] ion-select does not show the selected values

@kaiovm wrote:

Ionic:

Ionic CLI : 6.0.0
Ionic Framework : @ionic/angular 5.0.0
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.1.2

When I open the modal config-add-user.page.html to edit the data the ion-select “Coletor” doesn’t show any data:

001429×743 16.8 KB

However, after clicking on it, it shows that the two options are actual selected (as it should be). If I click on “OK” they will appear normally as selected itens:

002442×743 18.4 KB

config-add-user.page.html

<ion-header>

  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="closeModal()">
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title><b>Usuário</b></ion-title>
  </ion-toolbar>

</ion-header>

<ion-content class="ion-padding">

  <form [formGroup]="addUserGroup">
    <ion-list inset ion-no-border>

      <ion-item>
        <ion-label color="medium">Usuário:</ion-label>
        <ion-input class="ion-text-end" type="text" name="username" formControlName="username" value="{{ username }}"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Password:</ion-label>
        <ion-input class="ion-text-end" type="password" name="password" formControlName="password" value="{{ password }}"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Name:</ion-label>
        <ion-input class="ion-text-end" type="text" name="name" formControlName="name" value="{{ name }}"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Permissão:</ion-label>
        <ion-select class="ion-text-end" name="permission" formControlName="permission" value="{{ selectPermission }}">
            <ion-select-option value="1">Usuário</ion-select-option>
            <ion-select-option value="2">Administrador</ion-select-option>
        </ion-select>
        <ion-icon name="chevron-forward-outline" color="primary" item-end></ion-icon>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Coletor:</ion-label>
        <ion-select class="ion-text-end" multiple="true" name="idLine" formControlName="idLine" [(value)]="selectLine">
          <ion-select-option *ngFor="let item of linesList" value="{{item.id}}">
            {{ item.name }}
          </ion-select-option>
        </ion-select>
        <ion-icon name="chevron-forward-outline" color="primary" item-end></ion-icon>
      </ion-item>

      <br>
    
    </ion-list>

    <ion-row>
      <ion-col>
        <ion-button [disabled]="addUserGroup.invalid" (click)="postUser()" type="submit" expand="block" size="large">SALVAR</ion-button>
      </ion-col>
    </ion-row>

  </form>

</ion-content>

config-add-user.page.ts

/*****************************************************/
/******************* GENERAL IMPORTS *****************/
/*****************************************************/

import { UserService } from '../api/user.service';
import { Component, Input } from '@angular/core';
import { Validators, FormBuilder, FormControl } from '@angular/forms';
import { AlertController, ModalController } from '@ionic/angular';

@Component({
  selector: 'app-config-add-user',
  templateUrl: './config-add-user.page.html',
  styleUrls: ['./config-add-user.page.scss'],
})

export class ConfigAddUserPage {

  /* DATA VARIABLES */
  addUserGroup: any = {};
  linesList: Array<any>;

  /* EDIT VARIABLES */
  selectLine: Array<any>;
  selectPermission: string;

  // Data passed in by componentProps
  @Input() modal: any;
  @Input() edit: string;
  @Input() token: string;
  @Input() id: string;
  @Input() idLine: Array<any>;
  @Input() clientId: string;
  @Input() username: string;
  @Input() password: string;
  @Input() name: string;
  @Input() permission: string;

  constructor(
    public service : UserService,
    public alertCtrl: AlertController,
    public formBuilder : FormBuilder,
    public modalController: ModalController,
  ) {

      /*****************************************************/
      /****************** FORM VALIDATOR *******************/
      /*****************************************************/

      this.addUserGroup = this.formBuilder.group({
        token: new FormControl('xxxx', Validators.required),
        dns: new FormControl(this.service.getDns(), Validators.required),
        user: new FormControl(this.service.getUser(), Validators.required),
        pass: new FormControl(this.service.getPass(), Validators.required),
        clientId: new FormControl(this.service.getClientId(), Validators.required),
        id: new FormControl(this.id),
        username: new FormControl('', Validators.required),
        password: new FormControl('', Validators.required),
        name: new FormControl('', Validators.required),
        permission: new FormControl('', Validators.required),
        idLine: new FormControl('', Validators.required)
      });
  }

  /*****************************************************/
  /****************** ONINIT FUNCTIONS *****************/
  /*****************************************************/

  ionViewDidEnter() {
    this.getProductionLines();
    this.selectPermission = this.permission;
    this.selectLine = this.idLine;

    // Removing Ion Select Icons
    const ionChange = document.querySelectorAll('ion-select');
    ionChange.forEach((sel) => {
      sel.shadowRoot.querySelectorAll('.select-icon-inner')
        .forEach((elem) => {
          elem.setAttribute('style', 'display: none;');
        });
    });
  }

  /*****************************************************/
  /****************** POST OR UPDATE *******************/
  /*****************************************************/

  postUser() {
    if (this.edit == "true") {
      this.service.updateDataUser(this.addUserGroup.value)
        .subscribe(
          data=>{
            console.log(data.message);
        }, 
          err=>console.log(err)
      );
      this.modal.dismiss();
    } 
    if (this.edit == "false") {
      this.service.postDataUser(this.addUserGroup.value)
        .subscribe(
          data=>{
            if (data.search === false) {
              console.log(data.message);
              this.modal.dismiss();
            } else {
              console.log(data.message);
              this.postAlert();
            }
        },
          err=>console.log(err)
      );
      this.modal.dismiss();
    }
  }

  async postAlert() {
    const alert = await this.alertCtrl.create({
      header: 'Usuário Repetido',
      message: 'Tente outro username...',
      buttons: ['OK']
    });
    await alert.present();
  }

  /******************************************************/
  /******************* API - GET DATA *******************/
  /******************************************************/

  getProductionLines() {
    this.service.getDataProductionLines().subscribe(
      data => this.linesList = data,
      err => console.log(err)
    );
  }

  /******************************************************/
  /******************** CLOSE MODAL ********************/
  /******************************************************/

  closeModal() {
    this.modal.dismiss({
      'edit' : "",
      'token' : "", 
      'id' : "", 
      'idLine' : "", 
      'clientId' : "", 
      'username' : "", 
      'password' : "",
      'name' : "" ,
      'permission' : "",
    });
  }

}

Any ideas?

Posts: 1

Participants: 1

Read full topic