如何设置ion-option的默认选择值？

Question

我正在使用Ionic v2,在显示页面时无法设置所选值.

<ion-select [(ngModel)]="company.form">
    <ion-option *ngFor="let form of forms" [value]="form" [selected]="true">{{form.name}}</ion-option>
</ion-select>

我也尝试过checked,但这也不起作用.我怎样才能做到这一点？

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45

Answer 1

问题似乎是ion-option不喜欢rc3中的对象.我必须只处理对象的id部分,并编写一个单独的changehandler,找到所需的对象并将其设置为值.

  <ion-select [ngModel]="company.form.id" (ngModelChange)="companyFormSelected($event)" okText="Ok" cancelText="Mégsem">
    <ion-option *ngFor="let form of forms" [value]="form.id" [selected]="form.id == company.form.id">{{form.name}}</ion-option>
  </ion-select>

和改变处理程序:

companyFormSelected(newform) {
    let selectedForm = this.forms.find((f)=>{
      return f.id === newform;
    });
    this.company.form=selectedForm;
}

这似乎是rc3中的一个错误,但我不知道在哪里可以报告错误.我确实在离子论坛上开了一个主题.

Answer 2

如果处理默认值xor对象，则最干净的方法是为[compareWith]属性提供一个比较函数。此函数接受参数中的2个对象，如果相等则返回true。这样，将在开始时选择模型中的现有值。如果在选择之外的模型中添加了新数据，这也将起作用。

以下示例摘自官方Ionic文档

<ion-item>
  <ion-label>Employee</ion-label>
  <ion-select [(ngModel)]="employee" [compareWith]="compareFn">
    <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
  </ion-select>
</ion-item>

compareFn(e1: Employee, e2: Employee): boolean {
  return e1 && e2 ? e1.id == e2.id : e1 == e2;
}

编辑：使用双等于使它适用于Ionic 4（如Stan Kurdziel在评论中建议的那样）

Answer 3

这对我有用。

在 html 中：

<ion-select [(ngModel)]="company.form">
    <ion-option value="frm1"> Form 1 </ion-option>
    <ion-option value="frm2"> Form 2 </ion-option>
</ion-select>

在 ts 中：

company = {
   form:null
}; 

constructor(){
   this.company.form = "frm1";
}

Answer 4

<ion-select [(ngModel)]="name">// binding the value available from ts file
    <ion-option *ngFor="let form of forms; let idx = index" [value]="form.name"  selected="{{(idx==0).toString()}}">{{form.name}}</ion-option>
</ion-select>

ts文件中

name = this.forms[0].name //assign the variable name to the first index of your array

Answer 5

<ion-select ([ngModel])="dropdown1">
  <ion-select-option value="1">Item1</ion-select-option>
  <ion-select-option value="2">Item2</ion-select-option>
</ion-select>

以下将不起作用：

dropdown1 = 2;

但以下将起作用：

dropdown1 = 2 + "";

选择选项值被视为字符串，因此您应该将字符串值分配给模型变量，以便比较不会失败。