Свойство @Input() в угловом компоненте возвращает пустой массив
У меня есть компонент календаря со свойством данных, оформленным как @Input():
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit, OnChanges {
@Input() data: CalendarDay[];
constructor() {
this.data = [];
}
ngOnInit() {
this.initDays();
}
ngOnChanges(changes: SimpleChanges) {
console.info(this.data);
console.info(changes.data);
}
}
Я передаю данные из другого компонента следующим образом:
<app-calendar [data] = "this.calendarData"></app-calendar>
И переданные данные обрабатываются *ngFor в компоненте календаря (отрисовываются отлично, и все работает нормально):
<div *ngFor = "let item of data">{{item.date}}</div>
Я хочу сначала проанализировать эти данные, прежде чем отображать их в представлении, и всякий раз, когда я пытаюсь использовать свойство данных console.info в компоненте календаря, я получаю странный массив, он отображается как пустой, я могу «открыть» его из консоли браузера:
.
И когда я пытаюсь записать такое значение:
console.info(this.data[0])
или
console.info(changes.data.currentValue[0])
я получаю undefined значение.
Пожалуйста, попробуйте создать минимальный воспроизводимый пример, я рекомендую stackblitz.com
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Удалите this.data = [] из конструктора, избегайте каких-либо изменений при использовании инъекции зависимостей.
И используйте set и get для каждого Input(), который вы хотите использовать в своем шаблоне, это лучшая практика.
private _data: CalendarDay[];
@Input() set data(data: CalendarDay[]) {
if (data) {
this._data = data;
}
}
get data(): CalendarDay[] {
return this._data;
}
И в вашем HTML вы должны передать его с помощью:
<app-calendar [data] = "calendarData"></app-calendar>
В компоненте календаря вы можете использовать с
<div *ngFor = "let item of data">{{item.date}}</div>
Вы пытались удалить инициализацию из конструктора? Это не должно быть там. Вам следует избегать добавления в конструктор чего-либо, кроме внедрения зависимостей.