角组件中的@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>

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

。

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

console.log(this.data[0])

或

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

我得到undefined的值。

Answer 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>