Ionic 5/Angular - 离子选择不显示所选值答案

【问题标题】：Ionic 5/Angular - ion-select does not show the selected valuesIonic 5/Angular - 离子选择不显示所选值
【发布时间】：2020-07-17 22:53:30
【问题描述】：

离子：

离子 CLI：6.0.0
离子框架：@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

您可以在下面的 gif 中看到，单击“Coletor”后，“Linha 02”已被选中，尽管在单击之前它并未显示为选中状态。不过，它适用于“Permissão”字段：

https://i.stack.imgur.com/tjRjy.gif

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

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,
  ) {

      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)
      });
  }

  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;');
        });
    });
  }

  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();
  }

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

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

}

【问题讨论】：

<ion-select-option [value]="item"
你好，@AluanHaddad！我已经尝试过了，不幸的是它显示了同样的问题。

标签： angular ionic-framework

【解决方案1】：

可以这样实现

.html

    <ion-item>
       <ion-label>Choose Language</ion-label>
       <ion-select [(ngModel)]="selectedValue" (ionChange)='setValue()'>
       <ion-option value="english">English</ion-option>
       <ion-option value="sinhala">Sinhala</ion-option>
     </ion-select>
    </ion-item>

.ts

export class YourPage
 {
      responseData : any; 
      selectedValue: any;
      constructor(public navCtrl: NavController) {

      }

    setValue() {
      console.log('languageSelected',this.selectedValue);
    }

}

【讨论】：

你好，@Chanaka！谢谢您的帮助！当我尝试运行时，似乎不推荐使用 ngModel。我将它与 Ionic 3 一起使用，它工作正常，现在我正在迁移到 Ionic 5，它显示一条警告消息。

【解决方案2】：

我花了很长时间试图修复离子轮廓图标的颜色，最后我找到了问题。您必须在脑海中替换此行：

&lt;script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"&gt;&lt;/script&gt;

对于这个：

&lt;script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.js"&gt;&lt;/script&gt;

但是如果你安装了@ionic/cli，你就不需要把那一行放在你的脑海里了。

【讨论】：

这与问题无关

【解决方案3】：

您可以在 IONIC 5 中这样做

 <ion-select placeholder="Select One" (ionChange)="getSelectedCategory(mySelect)" [(ngModel)]="mySelect">
  <ion-select-option  *ngFor="let category of categories" value="{{ category.c_id }}" >{{ category.c_name }}</ion-select-option>
</ion-select>

在ts文件中

getSelectedCategory(mySelect) {
  console.log(mySelect);
}

我正在获得所选选项的价值，并且它对我来说工作正常。

【讨论】：