如何遍历输入装饰器传递的数组答案

【问题标题】：How to iterate over an array passed by an Input Decorator如何遍历输入装饰器传递的数组
【发布时间】：2018-06-05 02:58:47
【问题描述】：

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

我声明了我的数组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>;

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

[

【问题讨论】：

【解决方案1】：

把它改成

@Input()
 values: any;

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

看看这个working plunkr。你不需要#values。
这些中的任何一个都应该起作用：

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

【讨论】：