选择列表

Question

我想从我的选项列表中显示默认选项“全部”，但它不起作用。

  

    

filter.component.ts

  

@Output() onFilter = new EventEmitter<String>();

statusOptions = [
 { value: 'active', viewValue: 'Active' },
 { value: 'inactive', viewValue: 'Inactive' },
 { value: 'pending', viewValue: 'Pending' }
 ];

onStatusChange(val) {
  if (val === "") {
   this.onFilter.emit("");
 }
  else {
    this.onFilter.emit(`?status=${val}`);
  }
 }

  

    

filter.component.html

  

<form class="filter-form">
  <md-select (ngModelChange)="onStatusChange($event)" name="filter">
    <md-option [value]="" selected="selected">All</md-option>
    <md-option [value]="status.value" *ngFor="let status of statusOptions">
      {{status.viewValue}}
    </md-option>
  </md-select>
</form>

Answer 1

使用[ngModel]="selected"代替selected="selected"

<md-select [ngModel]="selected" (ngModelChange)="onStatusChange($event)" name="filter">

其中，组件字段selected引用statusOptions中的选定值。