javascript - az @Input() tulajdonság az Angular komponensben üres tömböt ad vissza

Van egy naptár komponensem, amelynek adatszolgáltatása a @Input(): díszítéssel rendelkezik

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.log(this.data);
    console.log(changes.data);
  }
}

Így adok át adatot egy másik komponensből:

<app-calendar [data]="this.calendarData"></app-calendar>

És a továbbított adatokat a *ngFor jeleníti meg a naptár komponensben (tökéletesen megjelenik, és minden rendben működik):

<div *ngFor="let item of data">{{item.date}}</div>

Először szeretném feldolgozni ezt az adatot, mielőtt kirenderelném a nézetbe, és valahányszor megpróbálom a console.log-tal kiíratni az adat tulajdonságot a naptár komponensben, furcsa tömböt kapok, üresnek jelenik meg, de meg tudom 'nyitni' a böngésző konzoljából:

.

És amikor így próbálok értéket naplózni:

console.log(this.data[0])

vagy

console.log(changes.data.currentValue[0])

Az undefined értéket kapom.

Válasz #1

Töröld a this.data=[]-t a konstruktorból, kerüld el bármi megváltoztatását, amikor függőséginjektálást használsz.

És használja a set és a get parancsot minden Input() esetében, amit a sablonjában szeretne használni, ez egy bevált gyakorlat.

  private _data: CalendarDay[];

  @Input() set data(data: CalendarDay[]) {
    if(data) {
     this._data = data;
    }
  }

  get data(): CalendarDay[] {
    return this._data;
  }

És az HTML-edben így kell átadnod:

<app-calendar [data]="calendarData"></app-calendar>

A naptár komponensben használhatja a következőkkel

<div *ngFor="let item of data">{{item.date}}</div>