Angular中ngFor渲染select选项：如何默认显示对象当前状态？

你的问题根源在于手动添加了一个带selected的独立<option>，同时又用*ngFor遍历整个statusOptions数组——当myObject.status已经在数组里时，自然会出现重复选项。不用额外加那个单独的option，直接在循环的选项上动态设置选中状态就可以解决，而且完全符合你“无需双向绑定，仅在变更时更新数据库”的需求。

修改后的代码如下：

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

关键改动说明： #

• 移除了多余的<option selected>{{myObject.status}}</option>，所有选项统一由*ngFor生成，从根源避免重复
• 用[selected]="status === myObject.status"实现动态选中：当循环到的状态和当前对象的状态匹配时，该选项会自动被设为默认选中项
• 给updateStatus方法增加了myObject参数，这样你在更新数据库时能明确知道是哪个对象的状态发生了变更（比如可以用对象的ID来定位数据）

这样实现后，下拉框既不会有重复选项，默认选中的是对象当前的状态，而且只有在用户切换选项时才会触发updateStatus方法去更新数据库，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Vincent Nguyen