Angular5无法设置下拉框的选项

Question

我想根据来自数据库的值保留下拉框中的选项。在 .ts 文件中，我做了以下操作：

public availList: any = [{'id':0, 'value':'Open'}, {'id':1, 'value':'Closed'}];

并且在 .html 中，我执行了以下操作：

<select class="form-control" name="monday" id="monday" [ngModel]="user.monday" (ngModelChange)="user.monday = $event" (change)="AvailabilityChange($event.target.value, 'monday')" #monday="ngModel">
  <option *ngFor="let av of availList" [value]="availability.availability">{{av.value}}</option>
</select>

我通过 {{availability.availability}} 看到了 availability.availability returns 0 的值，但是，我看到在下拉框中没有选项被 select 编辑。它应该 select 选项 "Open".

Answer 1

您创建了具有相同值的选项列表，模板应如下所示：

<option *ngFor="let av of availList" [value]="av.id">{{av.value}}</option>

和 availability.availability 的值应分配给 select 的模型 - user.monday

Answer 2

在您的 class 中分配 user.monday = 0，这样 "Open" 将在页面加载时被选中。

Angular5无法设置下拉框的选项

Angular 5 unable to set the option in drop down box

angular

ngfor