Angular 5 无法在下拉框中设置选项答案

【问题标题】：Angular 5 unable to set the option in drop down boxAngular 5 无法在下拉框中设置选项
【发布时间】：2019-08-13 10:06:52
【问题描述】：

我想根据来自数据库的值保留下拉框中的选项。在.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 的值返回0 但是，我看到在下拉框中，没有选择任何选项。它应该选择“打开”选项。

【问题讨论】：

标签： angular ngfor

【解决方案1】：

在您的班级中分配user.monday = 0，以便在页面加载时选择“打开”。

【讨论】：

【解决方案2】：

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

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

availability.availability 的值应该分配给选择的模型 - user.monday

【讨论】：

谢谢。但我想用 Open 预先选择该选项。哪个选项将被预先选择，将取决于“availability.availability”的值，因为这将返回 0 或 1。
对不起，我不明白你的意思。要在 Dropbox 中预先选择一个选项，您必须设置它的模型值。
是的，我确实喜欢[ngModel]="availability.availability"，而且效果很好。