Question

我正在尝试使用Angular2在我的html中显示一个带有select选项的默认选项，但是我做不到。

   <select name="selectedyear"  [disabled]="disabledPeriod" [(ngModel)]="selectedyear" (ngModelChange)="onChangeYear()">
          <option  name="selectedyear" selected="true" [ngValue]="null" disabled="true">Seleccione un año...</option>
          <option  name="selectedyear">2018</option>
          <option  name="selectedyear">2017</option>
   </select>

component.ts->

  public selectedyear: string;

启动应用程序时，我的选择为白色

Answer 1

从第一选项中删除selected="true并使用ngModel。它将显示默认情况下带有选择选项的选项(assigned in component)。

var selectedyear = 2018;

<select name="selectedyear"  [disabled]="disabledPeriod" [(ngModel)]="selectedyear" (ngModelChange)="onChangeYear()">
          <option  name="selectedyear" [ngValue]="null" disabled="true">Seleccione un año...</option>
          <option  name="selectedyear">2018</option>
          <option  name="selectedyear">2017</option>
   </select>

Answer 2

[ngValue] =“”代替null尝试使用“”代替null

Answer 3

 <select name="selectedyear"  [disabled]="disabledPeriod" [(ngModel)]="selectedyear" (ngModelChange)="onChangeYear()">
      <option  value="">Seleccione un año...</option>
      <option  value="2017">2017</option>
      <option  value="2018">2018</option>
      <option  value="2017">2017</option>

然后输入代码

selectedyear:string; 
 ngOnInit() {
   this.selectedyear = "";

}

可能不是最好的，但这可行

Answer 4

不需要selected =“ true”和[ngValue] =“ null” 然后只需将组件中的值分配给选定的年份变量即可。

selectedyear =“ 2018”;或selectedyear =“ Seleccione unaño...”;

所需的任何默认值。

我无法显示默认Angular2的选项

4 个答案: