使用ngModel选择选项

Question

我有一个选择多个问题的项目，我希望第一个问题默认显示。

我已经看到了如何使用类型为索引的示例来实现此目的的示例：

<select>
 <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">
  {{answer.name}}
 </option> 
</select>

并且它可以工作，但是当我要将选择绑定到组件的属性时，不再选择它：

<select  [(ngModel)]=searchterms.answerId>
 <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">
  {‌{answer.name}}
 </option> 
</select>

您可以在此处看到示例：

https://stackblitz.com/edit/angular-rv9vqi

Answer 1

您可以使用Angulars双向数据绑定来绑定到value attribute元素的<select>。在您的示例中，它看起来像这样：

<select [(value)]="searchterms.answerId">  
    <option *ngFor="let answer of answers" [value]="answer.id">{{answer.name}}</option>  
</select>

注意通过绑定到value和option的绑定，如何清除[selected]="i == 2"元素，从而清除let i = index元素>

但是，就像其他人提到的那样，您将需要在组件代码中初始化所需的默认值。

这里是您的代码可以使用的StackBlitz Demo

Answer 2

您需要将searchterms.answerId设置为适当的默认值。在您的情况下

Answer 3

然后您应该在组件中绑定searchterms。