javascript - 使用 ngModel 选择选项

Question

我有一个项目，其中包含几个问题，我希望默认显示第一个问题。

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

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

它可以工作，但是当我想将选择绑定(bind)到组件的属性时，它不再被选中:

<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

正如某些答案中所说，解决方案是为 serachterm 设置默认值，但我遇到的问题(我无法在 Playground 上重现它)是我从要求的服务收到这些答案后面，当构建组件时，它仍然没有它们，它给了我一个错误......我怎样才能让它在这些搜索词存在于服务中后为其分配值？

Answer 1

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

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

注意如何绑定(bind)到 value属性清理 option元素，让您能够删除 [selected]="i == 2"和let i = index

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

这是工作 StackBlitz Demo用你的代码