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

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>;

我不知道我是否声明了错误的数组类型，因为当我创建一个数组并传递它时，元素的类型总是 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();

How to iterate over an array passed by an Input Decorator