离子选择选择默认值不起作用答案

【问题标题】：ion-select select default value not working离子选择选择默认值不起作用
【发布时间】：2018-01-07 06:19:09
【问题描述】：

我有离子选择，它有很多选项，当视图准备好根据 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'
 }
]

【问题讨论】：

标签： angular typescript ionic2 ionic3

【解决方案1】：

代替selected属性，你可以在数据准备好时在控件中设置默认选项：

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

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

【讨论】：

【解决方案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;
   }
}

希望对你有帮助:)

【讨论】：

感谢 Nicolas，我花了很长时间试图解决这个问题。占位符是要走的路。完美运行
听起来像一个丑陋的黑客，但老实说，这是我发现使它在 ionic3 + FormControl 中工作的最干净的方法。非常感谢

【解决方案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;
 }

【讨论】：

非常感谢！这是正确答案

【解决方案4】：

当您的选项不是动态和静态时，您可以这样做 -

在你的打字稿中：-

this.myForm= this.formBuilder.group({
      selectOptionName: ['ValueHere', Validators.required]
    });

在您的 HTML 中：-

<ion-select formControlName = 'selectOptionName' value="ValueHere">
    <ion-select-option value="ValueHere">Value-1</ion-select-option>
    <ion-select-option value="ValueHere2">Value-2</ion-select-option>
 </ion-select>

【讨论】：

感谢您的赞赏

【解决方案5】：

只需执行以下操作：

HTML -

<ion-select formControlName="Level">
      <ion-option [value]="level.id" *ngFor="let level of levels" >
         {{level.name}}
      </ion-option>
</ion-select>

TS -

__formGroupInstance  : FormGroup

this.__formGroupInstance  = this.formBuilder.group({
Level: this.currentLevel 
})

【讨论】：

【解决方案6】：

你可以这样做：

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

【讨论】：