Angular ngFor select 显示默认值为对象的选项

Question

假设我有一个对象 statusOptions=['Approved', 'Waiting', 'Rejected']

在标记中我们有：

<div *ngFor="let myObject of objects">
    <select (change)="updateStatus($event.target.value)">
       <option selected>{{myObject.status}}</option>
       <option *ngFor="let status of statusOptions">{{status}}</option>
    </select>
<div>

如何将对象的当前状态显示为默认选定值？截至目前，如果对象的当前状态为 'Approved'

，它将复制并且下拉列表将显示 ['Approved', 'Waiting', 'Rejected', 'Approved']

我不需要双向绑定，因为我只是获取更改时的值并更新我的数据库。

Answer 1

在选项中设置[attr.selected]解决了。

<div *ngFor="let myObject of objects">
<select (change)="updateStatus($event.target.value)">
   <option *ngFor="let status of statusOptions" [attr.selected]="transaction.status === status ? true : null">{{status}}</option>
</select>

Angular ngFor select 显示默认值为对象的选项

Angular ngFor select options with object value as default shown

javascript

html-select

angular