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

我使用的是Ionic v2，在显示页面时无法设置所选值

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

---

内离子选项，你可以这样做

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

{{form.name}

问题似乎在于ion选项不喜欢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>

---

这似乎是rc3中的一个bug，但我不知道在哪里可以报告bug。我确实开了一家店

您不需要使用选定的属性，或者不需要使用[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>

{{form.name}

在html中-->
{{q}
在ts中-->
//如果你不想要任何默认选择
this.defaultSelectQuestion=-1；
//如果第一个元素应该是您的默认选择
this.defaultSelectQuestion=0；
this.selectedQuestion=this.questionArray[this.defaultSelectQuestion]

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

以下示例摘自官方文件

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

雇员
compareFn（e1:Employee，e2:Employee）：布尔值{
返回e1&&e2？e1.id==e2.id:e1==e2；
}

---

编辑：使用双等号使其适用于Ionic 4（正如Stan Kurdziel在评论中所建议的）

ion Select标记只需将数组分配给ngModel，并选择默认值。简单的

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

---

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

这对我很有用

在html中：

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

---

试试这个：

this.company.form=this.forms[0]

在您的

组件中。ts

这样行吗？看起来您现在正在将select上的

ngModel

绑定到一个字符串，但是选项值都是对象。好的，至少它表明rc3中的ion选项实际上可以显示默认值。不过，解决方案是不在其中使用对象，也不必涉及索引。谢谢您的时间@MohanGopiDidn't work。也尝试了[attr.checked]，但也没有成功。你使用的是相同的爱奥尼亚版本吗？据我所知，这是爱奥尼亚v2 rc-3中的一个错误，在最终版本中已修复。我想您的解决方案现在可以正常工作了，看起来它应该可以正常工作，而我的解决方案是解决rc-3中的错误的一种方法。因此，为了将来的参考，我把你的答案作为我最初问题的最佳解决方案。谢谢你的回答！如果我初始化company.form.id=2，它不应该在视觉上显示选中的选项？它没有发生，也不知道为什么……我认为这应该是公认的答案。它更干净，更直截了当，而且是官方的爱奥尼亚建议-谢谢！在Ionic 3中，没有[compareWith]的绑定对我来说很好（甚至不使用对象，只使用数字作为值），但在Ionic 4中退出工作。。。添加compareWith并仅使用double equals而不是triple equals固定了Ionic 4。这在较新版本的Ionic中不起作用。所选值中的任何更改都不会反映出来。@invot将三重等于替换为双精度，因为似乎Ionic 4 mix string&int VALUES有效，但如果选择是对象，该怎么办？今天，这解决了我在所有其他建议失败后遇到的问题。。。！

  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]

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

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

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

company = {
   form:null
}; 

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