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]

不兼容

默认选择不起作用

1 个答案: