为什么带有选择的Angular ngModel不起作用答案

【问题标题】：Why Angular ngModel with select not working为什么带有选择的Angular ngModel不起作用
【发布时间】：2018-08-31 13:34:23
【问题描述】：

我正在尝试以这种方式绑定 ngModel 来选择。

<select name="select1" [(ngModel)]="selectedAssessment">
  <option *ngFor="let prodFam of productFamilies" 
  [ngValue]="prodFam">{{prodFam}}</option>

组件

export class AppComponent  {
  name = 'Angular 4';
  public productFamilies: string[] = ['Collector Method', 'Manual Upload'];
  public selectedAssessment: string = 'New Assessment';
}

加载模板后，我尝试通过 ngModel 在选择中显示默认值，但没有显示。这里有什么问题？ Stackblitz link

【问题讨论】：

标签： angular angular-forms

【解决方案1】：

这是因为你的源数组中没有New Assessment，设置如下

  public productFamilies: string[] = ['Collector Method', 'Manual Upload','New Assessment'];

STACKBLITZ DEMO

【讨论】：

【解决方案2】：

您不能在默认的 html 下拉菜单中使用占位符。但是你可以禁用第一个选项，所以它会像占位符一样显示。

我创建了 stackblitz 演示：Stackblitz Demo

【讨论】：

但是如何再次将其重置为默认值？例如，如果我在选择一个选项并关闭模式后打开一个模式，如何重置为新评估？？
通过this.selectedAssessment = '';，我也更新了演示，请在 Stackblitz 链接上方再次查看。