AngularJS2+中无法通过动态属性名访问数组对象属性问题求助

嘿，我来帮你捋捋这个问题——理论上this.itemList[0][obj]完全应该能拿到1，因为obj的值是'id'，和直接写this.itemList[0].id是完全等价的。如果取不到，大概率是下面几个隐藏坑在搞鬼：

1. 属性名字符串带了不可见空白 #

先检查this.headers[0].name的真实值，有时候看起来是'id'，但实际上前后藏了空格或者换行符（比如后端返回的时候带了空白）。你可以用console.log(JSON.stringify(obj))来打印真实的字符串内容，要是发现有多余字符，直接加个trim()处理：

let obj = this.headers[0].name.trim();
console.log(this.itemList[0][obj]); // 这下应该能拿到正确值了

2. this的指向跑偏了 #

如果这段代码是在回调函数（比如setTimeout、点击事件、Promise回调）里执行的，this的指向可能已经不是你原来的对象了，导致this.itemList或者this.headers根本不是你预期的数组。解决方法很简单：

• 提前把this存成变量：

  const that = this;
  // 后面都用that代替this
  let obj = that.headers[0].name;
  console.log(that.itemList[0][obj]);
  

• 或者用箭头函数绑定this（比如在Vue组件方法、React函数组件的回调里）：

  someAsyncOperation(() => {
    let obj = this.headers[0].name;
    console.log(this.itemList[0][obj]);
  });
  

3. 属性名大小写不匹配 #

虽然你的示例里是id，但实际代码里可能存在大小写不一致的情况——比如headers里存的是'ID'，但itemList里的属性是小写的'id'，这种时候自然取不到值。可以统一转成小写或者大写：

let obj = this.headers[0].name.toLowerCase();
console.log(this.itemList[0][obj]);

先验证基础逻辑 #

要是以上情况都排除了，你可以先在一个干净的代码片段里测试基础逻辑，确认核心代码没问题：

const itemList = [ { id: 1, name: 'a', address: 'as dasf a' }, { id: 2, name: 'b', address: 'as dasf a' }, { id: 3, name: 'c', address: 'as dasf a' } ];
const headers = [ { name: 'id', show: true }, { name: 'name', show: true }, { name: 'address', show: false } ];
const obj = headers[0].name;
console.log(itemList[0][obj]); // 这里肯定输出1

要是这段代码能正常运行，那问题绝对出在你实际代码的运行环境里，再回头检查this指向或者字符串内容就好啦。

内容的提问来源于stack exchange，提问作者Alok Kamboj