【Angular2】插值表达式如何嵌套显示
来源:互联网 发布:韩顺平java全套视频 编辑:程序博客网 时间:2024/04/30 14:28
问题描述
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 ,第一条就解决了我的问题。
阅读全文
0 0
- 【Angular2】插值表达式如何嵌套显示
- 如何求出插值表达式
- 去除vue插值表达式{{}}
- EL表达式如何嵌套使用
- Camera 如何实现插值
- Camera 如何实现插值
- 二维插值的三维显示
- 正则表达式如何处理嵌套结构
- 正则表达式如何处理嵌套结构
- 如何匹配嵌套Html标签(正则表达式)
- 【Angular2】如何搭建Angular2的环境
- 【Angular2】 如何创建一个Angular2项目
- 【Angular2】如何搭建Angular2的环境
- 【Angular2】 如何创建一个Angular2项目
- 如何自定义Angular2 管道
- angular2的ngfor ngif指令嵌套
- angular2的ngfor和ngif指令嵌套
- 【Angular2】遍历嵌套实体生成数组
- hdu 5976 Detachment(乘法逆元)(附测试用例)
- 关于The user specified as a definer ('root'@'%') does not exist 解决方法
- block与inline 元素
- hdu 1124 圆桌会议
- MFC中有三种文件操作的类 CFile ,CArchive,CDocument
- 【Angular2】插值表达式如何嵌套显示
- 基础算法(二分,去重,排列)
- 后台管理布局之模板继承2 补充 继承拼接
- Arctic Network POJ
- Python 变量类型
- Java多线程之线程安全与异步执行
- 卷积神经网络中十大拍案叫绝的操作
- Anaconda
- HDU