Angular 11 无法动态访问对象属性答案

【问题标题】：Angular 11 can't access object property dynamicallyAngular 11 无法动态访问对象属性
【发布时间】：2021-11-09 17:10:03
【问题描述】：

我必须访问我的对象属性的子集并将标签和值存储在另一个数组中。基本上我有这个对象：

    myObject: CustomObject {
    prop1: value1,
    prop2: value2
    prop3: value3
    }

作为输出，我需要一个类型为对象的数组：{label: string, value: number}。
我需要用 prop1 和 prop2 及其值填充这个数组，这样我就有了这样的东西：

    myArray = [{label: prop1, value: value1}, {label: prop2, value: value2}]

我试过的是这样的：

    labels = ['prop1', 'prop2'];
    labels.forEach((l: any) => {
      this.myArray.push({ label: l, value: this.myObject[l] })
     })

或者 this.myObject.l

但我收到此错误：

元素隐式具有“any”类型，因为表达式为“any”类型不能用于索引类型“MyObject”

我已将“l”的类型更改为字符串，但我得到了：

在类型上找不到带有“字符串”类型参数的索引签名

这样做的正确方法是什么？

我的对象

【问题讨论】：

标签： javascript angular typescript angular11

【解决方案1】：

您可以使用keyof 代替any 来告诉typescript 标签是一个字符串数组，其中字符串是界面的键：

Playground Link

interface CustomObject {
    prop1: any;
    prop2: any;
    prop3: any;
}

const myObject: CustomObject = {
    prop1: 1,
    prop2: 2,
    prop3: 3,
}

const labels: (keyof CustomObject)[] = ['prop1', 'prop2'];

const myArray = labels.map(label => ({ label, value: myObject[label] }))
console.log(myArray)

【讨论】：

【解决方案2】：

您可以使用Object.entries 函数来迭代键/值对：

const myObject = { prop1: 'value1', prop2: 'value2', prop3: 'value3' }
let myArray = [];

Object.entries(myObject).map((item)=>{ myArray.push({label:item[0], value:item[1]})})
console.log(myArray)

【讨论】：