使用 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

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

Answer 1

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

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

请注意，绑定到value属性如何通过删除[selected]="i == 2"和let i = index来清理option元素

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

这是带有您的代码的工作StackBlitz演示

Answer 2

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

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular 6';
answers = [
{name: "Answer 1", id: '1'},
{name: "Answer 2", id: '2'},
{name: "Answer 3", id: '3'},
{name: "Answer 4", id: '4'},
];
searchterms = {
answerId: this.answers[1].id //Set the default value properly
};
}

斯塔克闪电战

Answer 3

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

您可以在constructor内执行此操作，如下所示。

this.searchterms.answerId = this.answers[1].id;

演示