Как перебрать массив, переданный декоратором ввода

Я генерирую в своем родительском компоненте массив объектов и передаю его через декоратор ввода дочернему компоненту (элемент диаграммы).

Я объявляю свой массив 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>;

Я не знаю, неправильно ли я объявляю тип массива, потому что, когда я создаю массив и передаю его, всегда тип элемента - объект

[введите здесь описание изображения]


person JuanmaPérez    schedule 22.12.2017    source источник
comment
См. пример приложения здесь freakyjolly.com // передать массив элементов в шаблоне для итерации   -  person Code Spy    schedule 18.07.2018


Ответы (3)


Взгляните на этот рабочий plunkr. Вам не нужен #values.
Любой из этих вариантов должен работать:

@Input() values: Array<Object>=[];
@Input() values: Array<Object>;
@Input() values: Array<Object>=new Array();
person Olezt    schedule 22.12.2017
comment
Да! Теперь я знаю, что это объявление работает, но когда я передаю массив через декоратор ввода, я не знаю почему, но я не могу получить доступ к его значениям. - person JuanmaPérez; 28.12.2017

Просто измените его как

@Input()
 values: any;
person Sajeetharan    schedule 22.12.2017

Очень важно понять одну вещь: входные данные компонента еще не оцениваются в его конструкторе. Итак, вы должны инициализировать свои «chartValues» в жизненном цикле ngOnInit.

  ngOnInit(): void {
     ...
     this.chartValues.push({ name: data.countryName, y: data.areaInSqKm});      
}
person Younux    schedule 22.12.2017
comment
Он говорит, что я генерирую в своем родительском компоненте массив объектов и передаю его через декоратор ввода дочернему компоненту. - person Olezt; 22.12.2017