Question

App是具有Angular 6的Ionic 4 ... 我有一个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

这就是我们拥有[(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获得离子选择的默认值

2 个答案: