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

Question

我正在尝试将 "Select a color" 显示为下拉框中的默认值。选择颜色后，我希望此选项不可用。

下面是我使用的代码：

<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 时，它在我的下拉框中没有显示默认文本。

Answer 1

那是因为模型 selectedColor 是空的，而 angular select 选项 select 在 ngModel 中编辑，在你的情况下是 undefined ，并且 angular 搜索该值，但没有找到任何内容。

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

像这样：

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中看到它，享受吧。

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

Default value of dropdown box not showing in Angular 2

html

css

dropdownbox

angularjs

angular