默認選擇不工作

Question

我有一個下拉菜單，如下

<select class="form-control input-xs" [(ngModel)]="filter.period" name="periodId" (ngModelChange)="onPeriodChange($event)"> 
    <option *ngFor="let period of periods; let i = index" [ngValue]="period.value" [selected]="i==0"> 
            {{period.text}} 
    </option> 
</select> 

但在UI中選擇它不顯示我的第一要素。它顯示爲默認選擇的只是空白，但它使得它像組件

<select class="form-control input-xs ng-untouched ng-pristine ng-valid" name="periodId" ng-reflect-name="periodId"> 
<!--template bindings={ 
    "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object]" 
}--> 
    <option value="0: 0" ng-reflect-ng-value="0" ng-reflect-selected="true"> 
     All pending tasks 
    </option> 
    <option value="1: 1" ng-reflect-ng-value="1" ng-reflect-selected="false"> 
     Due in next 7 days 
    </option> 
    <option value="2: 2" ng-reflect-ng-value="2" ng-reflect-selected="false"> 
             Due next month 
    </option> 
    <option value="3: 3" ng-reflect-ng-value="3" ng-reflect-selected="false"> 
     Completed in last 7 days 
    </option> 
</select> 

下拉選項如下

periods = [{ text: 'All pending tasks', value: 0 }, 
     { text: 'Due in next 7 days', value: 1 }, 
     { text: 'Due next month', value: 2 }, 
     { text: 'Completed in last 7 days', value: 3 }]; 

Answer 1

filter.coordinator需要在periods的實例之一。

[selected]="i==0"不符合[ngValue]