角度组件中的@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 数据属性时，我都会得到奇怪的数组，它显示为空，我可以从浏览器控制台“打开”它：

.

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

console.log(this.data[0])

或者

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

我得到了undefined价值。

Answer 1

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

对于您想在模板中使用的每一个，使用setandget都是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>