使用 *ngFor 在 ion-select 上获取默认值

Question

应用程序是 Ionic 4，Angular 6... 我有一个 ion-select 是表单的一部分。它使用 *ngFor 填充您的队友列表。我正在尝试使用基于 ionic 4 docs select-option.

的 selected 属性

<ion-select *ngFor="let member of team" [(ngModel)]="model.assignedTo" #assignedTo="ngModel" name="assignedTo" okText="Okay" cancelText="Dismiss">
    <ion-select-option>{{ member.firstName }} {{ member.lastName }}</ion-select-option>
</ion-select>

我遇到了很多麻烦。我尝试了不同的语法，例如 [selected], value, [value], selected, etc.。我只想 select member.firstName == 'Me'

的选项

谢谢。

Answer 1

这就是我们 [(ngModel)] 为该变量设置所需值的原因。另外，您的 *ngFor 在 select 上，尽管它应该在 option 上：

TS:

model = { assignedTo: 'Me'}
team = [{firstName: 'You'}, {firstName: 'Me'}];

HTML:

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
  <ion-select [(ngModel)]="model.assignedTo" #assignedTo="ngModel" name="assignedTo">
    <ion-select-option *ngFor="let member of team" [value]="member.firstName">
      {{ member.firstName }}
    </ion-select-option>
  </ion-select>
</form>

Answer 2

将语法更改为：

<ion-select [(ngModel)]="model.assignedTo" #assignedTo="ngModel" name="assignedTo" okText="Okay" cancelText="Dismiss">
    <ion-select-option *ngFor="let member of team" [value]="member.id">{{ member.firstName }} {{ member.lastName }}</ion-select-option>
</ion-select>

在 JS 方面：

this.model.assignedTo = this.account.id;

使用 *ngFor 在 ion-select 上获取默认值

Getting a default value on ion-select with *ngFor

ionic-framework

angular

ionic4

angular6