Question

我正在尝试通过这种方式绑定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在select中显示默认值，但未显示。怎么了 Stackblitz link

Answer 1

这是因为您的源数组中没有 <div class="flex-container"> <div class="full-width-four"> <img class="recruitment" src="http://via.placeholder.com/570x415"> </div> <div class="full-width-eight">Column 2</div> </div> ，请按如下所示进行设置

New Assessment

STACKBLITZ DEMO

Answer 2

您不能在默认的html下拉列表中使用占位符。但是您可以禁用第一个选项，因此它将显示与占位符相同的内容。

我创建了stackblitz演示：Stackblitz Demo

为什么带有select的Angular ngModel不起作用

2 个答案: