Angular 2中未显示下拉框的默认值

【问题标题】：Default value of dropdown box not showing in Angular 2Angular 2中未显示下拉框的默认值
【发布时间】：2016-09-23 18:59:24
【问题描述】：

我试图在下拉框中显示“选择颜色”作为默认值。选择颜色后，我希望此选项不可用。

下面是我正在使用的代码：

<select class="color-filter" [(ngModel)] = "selectedColor">
     <option disabled selected value class="hideoption">Select a Color</option>
     <option *ngFor="let c of color | mapToIterable" [value]="c.key">{{c.val}}</option>
</select>

CSS：

 .hideoption { display:none; visibility:hidden; height:0; font-size:0; }

不包括 ngModel 这工作正常。但是，当我包含 ngModel 时，它在我的下拉框中没有显示默认文本。

【问题讨论】：

标签： html css angularjs angular dropdownbox

【解决方案1】：

那是因为模型selectedColor 是空的，并且角度选择在ngModel 中选择的选项，在您的情况下是undefined，然后角度搜索该值，它什么也没找到。

您应该为默认选项设置一个默认值并将该值设置为模型。

像这样：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <select class="color-filter" [(ngModel)] = "selectedColor">
     <option disabled value="0" class="hideoption">Select a Color</option>
     <option *ngFor="let c of color" [value]="c">{{c}}</option>
</select>  
  `,
  styles: [`
  .hideoption { display:none; visibility:hidden; height:0; font-size:0; }
  `]
})
export class AppComponent {
  selectedColor:any = 0;
  color;

  constructor(){
    this.color = [
      "red","blue"
    ]
  }
}

你可以在这个Plunker看到它，享受吧。

【讨论】：