Angular 2插值中如何通过关联对象变量获取目标值？

嘿，我来帮你搞定这个问题！你想要用itemsObj.item1的取值作为动态Key，去获取itemsObj2中对应键的文本值，之前的{{itemsObj2.itemsObj.item1}}写法之所以出错，是因为点语法会把itemsObj.item1当成一个字面量属性名去查找，而不是先计算它的实际值。

正确的实现方式 #

在Vue模板里，要使用方括号语法来实现动态Key的访问，具体写法如下：

{{ itemsObj2[itemsObj.item1] }}

为什么这个写法有效？ #

方括号语法会先执行括号内的表达式逻辑：

1. 先获取itemsObj.item1的实际值，也就是'A1'
2. 再用这个值作为Key去访问itemsObj2的属性，最终得到对应的文本'Very conservative and up'

完整示例 #

假设你的Vue组件data定义如下：

data() {
  return {
    itemsObj: { 'item1' : 'A1', 'item2' : 'A2', 'item3' : 'B', 'item4' : 'C', 'item5' : 'D' },
    itemsObj2: { 'A1' : 'Very conservative and up', 'A2' : 'Conservative and up', 'B' : 'Balanced and up', 'C' : 'Growth and up', 'D' : 'Aggressive' }
  }
}

在模板中使用上述正确写法，就能成功渲染出目标文本内容。

额外补充 #

• 如果是在JavaScript代码（比如methods、computed）里做同样的操作，写法逻辑一致：this.itemsObj2[this.itemsObj.item1]
• 要是动态Key是更复杂的表达式，也可以直接放在方括号里计算，比如itemsObj2[itemsObj['item' + currentIndex]]

内容的提问来源于stack exchange，提问作者Kiran Dash