Question

所以我在我的组件中有这个数组： vehicleTypes = ['Bicycle', 'Car', 'Motorcycle', 'Van'];

我用以下内容生成下拉HTML：

<select id="vehicletype" class="form-control" [(ngModel)]="selectedVehicleType" >
    <option *ngFor="let vt of vehicleTypes; let i = index" [selected]="i === 0">{{ vt }}</option>
</select>

如何在页面加载时设法将值存储在selectedVehicleType中？现在它只显示下拉列表中的第一个值，但selectVehicleType为undefined。在将其存储到selectVehicleType之前，我必须先选择另一个值。

请注意我知道在组件中手动分配它，但我想知道HTML中是否有其他方法。每次我需要下拉列表时，我都不想在我的组件中编写额外的代码行。

Answer 1

无法设置模型的默认值，因为它会覆盖selected属性绑定。我还建议使用option元素的值绑定。

<select id="vehicletype" class="form-control" [(ngModel)]="selectedVehicleType" >
    <option *ngFor="let vt of vehicleTypes; let i = index" [value]="vt">{{ vt }}</option>
</select>

在您的组件中，您可以将声明和设置合并为一行，因此它不会添加更多代码而不是在模板中设置它：

selectedVehicleType: string = vehicleTypes[0];

默认值选择列表未绑定到init上的模型

1 个答案: