使用*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.。我只想选择以下选项：member.firstName == 'Me'

谢谢。

Answer 1

将语法更改为：

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

Answer 2

这就是为什么我们有[(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>