Angular 5中如何用ngFor遍历展示银行对象的名称列表？

咱们先拆解下你代码里的问题，再给出修复方案：

原代码的核心问题 #

1. 遍历数据源错误：你的银行数据结构是this.Banks.detail数组，但你当前*ngFor遍历的是banks（注意大小写和变量名匹配问题），应该直接遍历Banks.detail这个存储银行列表的数组。
2. 插值表达式错误：你写的{{Banks.detail.name}}是在访问数组本身的name属性，而不是数组里每一个银行对象的name，这肯定拿不到正确的银行名称。要使用ngFor定义的迭代变量（也就是你写的bank）来访问当前项的属性。
3. [value]绑定无效：你绑定的combo没有定义，应该绑定当前银行的具体值（比如名称、ID等业务需要的字段）。

正确的实现代码 #

假设你的组件中数据结构是这样的：

// 组件内定义的银行数据
Banks = {
  detail: [
    { name: "中国工商银行" },
    { name: "中国建设银行" },
    { name: "招商银行" }
    // 更多银行数据...
  ]
};

对应的模板代码应该修改为：

<option *ngFor="let bank of Banks.detail" [value]="bank.name">
  {{ bank.name }}
</option>

额外优化建议 #

如果你的银行对象包含唯一标识ID（比如{ id: 1, name: "中国工商银行" }），建议把[value]绑定为ID，这样后续处理选中值时更符合业务逻辑：

<option *ngFor="let bank of Banks.detail" [value]="bank.id">
  {{ bank.name }}
</option>

这样修改后，ngFor会遍历Banks.detail数组里的每一个银行对象，正确渲染每个银行的名称，同时绑定有效的value值，就能正常运行了。

内容的提问来源于stack exchange，提问作者Rizki Hadiaturrasyid