使用 ngModel 选择选项

Question

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

\n\n

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

\n\n

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

\n\n

它有效，但是当我想将选择绑定到组件的属性时，它不再被选择：

\n\n

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

\n\n

您可以在此处查看示例：

\n\n

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

\n\n

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

\n

Answer 1

您可以使用 Angulars 双向数据绑定来绑定到元素的value 属性<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 演示