如何迭代输入装饰器传递的数组

Question

我在父组件中生成一个对象数组，并将它通过输入装饰器传递给子组件（图表元素）。

我声明了我的数组chartValues，我遍历了主数据对象，并通过将它们推入我的chartValues数组中来获取我在图表中需要的值。

chartValues : Array<Object>=[];

this.chartValues.push({ name: data.countryName, y: data.areaInSqKm });

后来我通过这样的输入装饰器传递了这个chartValues，我在子组件中收到它，但我无法迭代它，我无法到达键或条目。

<chart #values [filter]="filters.metric" [values]="chartValues"></chart>

@Input() values: Array<Object>;

我不知道我是否在声明数组类型错误，因为当我创建一个数组并且我传递它时，该元素的类型总是对象

[

Answer 1

只需将其更改为

即可

@Input()
 values: any;

Answer 2

有一点非常重要，理解组件的输入尚未在其构造函数中进行评估。 所以你应该在ngOnInit生命周期中初始化你的“chartValues”

  ngOnInit(): void {
     ...
     this.chartValues.push({ name: data.countryName, y: data.areaInSqKm});      
}

Answer 3

看看这个working plunkr。 您不需要#values 其中任何一个都应该有效：

@Input() values: Array<Object>=[];
@Input() values: Array<Object>;
@Input() values: Array<Object>=new Array();