使用 ngModel 选择选项答案

【问题标题】：Select option with ngModel使用 ngModel 选择选项
【发布时间】：2019-12-05 16:52:41
【问题描述】：

我有一个项目有几个问题可供选择，我希望第一个问题默认出现。

我已经看到了一个如何使用索引来实现这一点的示例，类型为：

<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 设置默认值，但我遇到的问题（我无法在操场上重现它）是我从要求的服务中收到这些答案后退，当组件构建时它仍然没有它们，它给了我一个错误....一旦它们存在于服务中，我怎样才能让它为这些搜索词分配值？

【问题讨论】：

标签： javascript html angular angular-ngmodel angular2-ngmodel

【解决方案1】：

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

<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

【讨论】：

【解决方案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
  };
}

stackblitz

【讨论】：

【解决方案3】：

那么你应该在你的组件中绑定searchterms。

您可以在constructor 中进行如下操作。

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

Demo

【讨论】：