javascript - Angular 组件中的@Input() 属性返回空数组

Question

我有一个日历组件，其数据属性装饰为 @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.log(this.data);
    console.log(changes.data);
  }
}

我像这样从另一个组件传入数据:

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

传递的数据由日历组件中的 *ngFor 呈现(呈现完美，一切正常):

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

我想先解析这些数据，然后再将其呈现到 View 中，每当我尝试在日历组件中使用 console.log 数据属性时，我都会得到一个奇怪的数组，它显示为空，我可以从浏览器控制台“打开”它:

.

当我尝试记录这样的值时:

console.log(this.data[0])

或

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

我得到 undefined 值。

Answer 1

从构造函数中删除 this.data = []，避免在使用依赖注入(inject)时更改任何内容。

并为每个要在模板中使用的 Input() 使用 set 和 get，这是最佳实践。

  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>