如何设置离子选项的默认选择值？

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

如果您处理默认值 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 2

问题似乎是 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 中的一个错误，但我不知道在哪里可以报告错误。我确实打开了topic on ionic forum。

Answer 3

<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 4

这对我有用。

在 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 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 + "";

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

Answer 6

您不需要使用属性 selected 或 [selected] 没有必要

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

Answer 7

在ion-option里面，你可以做

<ion-option [attr.selected]="(form.name == name) ? true : null"> {{ form.name }} </ion-option>

Answer 8

  in html---->

     <ion-item text-center >
        <ion-select  [(ngModel)]="selectedQuestion" placeholder="Choose Security Question" >
          <ion-option *ngFor="let q of questionArray let i=index"  selected="{{(i==defaultSelectQuestion).toString()}}"  >
             {{q}}
            </ion-option>
        </ion-select>
      </ion-item>


in ts---->
//if u dont want any default selection
    this.defaultSelectQuestion = -1; 

//if first element should be your default selection
  this.defaultSelectQuestion = 0;



this.selectedQuestion=this.questionArray[this.defaultSelectQuestion]

Answer 9

长话短说，并引用 ionic 文档（始终参考原始来源）： “选择应该与子元素一起使用。如果没有为子元素赋予 value 属性，则其 text 将用作 value。 如果在 上设置了 value，则将根据该 value 选择所选选项。"

...因此....确保您的 ionic-select 和 ionic-select-option 上的 value 属性引用相同javascript object.attribute 在您的代码中...基本上指向同一事物..请参阅下面的 ionic-select 和数组级别值中的页面级别属性 value="{{ country.id }}" ="{{c.id}}" 离子选择选项

请注意，ngModel 不再管理页面级别的国家 属性生命周期

    <ion-item>
        <ion-select *ngIf="countries.length > 0"
                     (ionChange)="onCountryChaged($event)"
                     interface="popover"
                      clearInput="true"
                      placeholder='Country (required)'
                       value="{{ country.id }}">
            <ion-select-option lines="none"
              *ngFor="let c of countries"
               value="{{ c.id }}"> {{ c.label }}
            </ion-select-option>
        </ion-select>
     </ion-item>
        
        
Inside the .ts file we can now set *country* member programmatically
Page:constructor();
    this.platform.ready().then(async () => {
        this.getCountries(); //load list of countries from provider
        this.country = this.navDataService.getCountry();//local data store to save state between pages
        }).catch(error => { });
        
Page:EventHandler onCountryChaged(event): void {
     
    let id = event.detail.value;
    this.country = this.countries.find( item => item.id == id ) ;
    this.navDataService.setCountry(this.country);
}