【Angular2】插值表达式如何嵌套显示

问题描述

  Angular项目中添加了一个级联下拉框组件，如下图所示：

  组件使用ngFor指令遍历Select 同样还有每个Select中的Option。

<option *ngFor="let item of datas[i]" value="{{item.id}}">{{item.name}}</option>

  现在需要解决的问题是：每个下拉列表数据源中的字段名称都不相同，如果统一都使用 item.name 显然不能满足需求。而如果每个列表所要显示的字段都是可以由用户来配置的，那么组件就会变得灵活很多。

解决方案

• 准备一个数组来保存每个下拉列表要显示的字段名称：

dropDownAttributes =["institutionName","majorName"];

• 首先想到的是直接利用 {{}} 插值表达式的嵌套，来完成每个Select的Option项属性的绑定。但是测试后发现Angular中不支持 {{}} 的嵌套，后来在Stack Overflow上发现有类似的问题，使用 [ ] 完美解决问题。

{{item[dropDownAttributes[i]]}}

  

小结

  我一直在思考该如何把问题表述准确，如果别人遇到和我一样的问题，能够快速的通过关键字搜索找到我的答案。同样的，准确使用关键词搜索能够快速的找到自己想要的答案。 在中文搜索插值表达式嵌套没有想要的答案时，又在谷歌搜索中输入了 Angular2 nested interpolation ，第一条就解决了我的问题。