按住ion-select选择不起作用的默认值

Question

我有离子选择，有很多选项，当视图准备好根据CurrentNumber选择一个默认值时，我也有。我有这个代码：

<ion-select formControlName="Level">
          <ion-option [value]="level.id" *ngFor="let level of levels" [attr.selected]="(level.levelNumber == currentLevel)? true : null">
             {{level.name}}
          </ion-option>
</ion-select>

this.currentLevel = 1;

数据来自服务器，如下所示：

data = [
 {
  levelNumber : 1,
  name:'abcd'
 },
 {
levelNumber:2,
name:'efg'
 }
]

Answer 1

当数据准备就绪时，您可以在控件中设置默认选项，而不是selected属性：

// When the data is ready
this.yourForm.get('Level').setValue(data.id);

这会将id等于data.id的选项设置为默认值。

Answer 2

我找到了一种使用占位符的方法

<ion-select id="genderInput" [formControl]="gender" [placeholder]="gender.value.toUpperCase() | translate">
   <ion-option value="female">{{ 'FEMALE' | translate }}</ion-option>
   <ion-option value="male">{{ 'MALE' | translate }}</ion-option>
</ion-select>

我还需要添加以下样式来覆盖占位符的默认颜色

ion-select {
   div.select-text.select-placeholder {
      color: get-color(black) !important;
   }
}

希望它能有所帮助:)

Answer 3

然后是这个:直接来自here的示例

 * ### Object Value References
 *
 * When using objects for select values, it is possible for the identities of these objects to
 * change if they are coming from a server or database, while the selected value's identity
 * remains the same. For example, this can occur when an existing record with the desired object value
 * is loaded into the select, but the newly retrieved select options now have different identities. This will
 * result in the select appearing to have no value at all, even though the original selection in still intact.
 *
 * Using the `compareWith` `Input` is the solution to this problem
 *

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

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