Question

我正在尝试显示＆＃34;选择颜色＆＃34;作为我的下拉框中的默认值。选择颜色后，我希望此选项不可用。

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

<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为空，并且角度选择在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中看到它，享受。

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

1 个答案: