时间戳

首页 > 解决方案 > 角度组件中的@Input() 属性返回空数组

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

问题描述

我有带有 data 属性的日历组件装饰为@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(changes.data.currentValue).

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

console.log(this.data[0])

或者

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

我得到了undefined价值。

标签： javascriptangulartypescriptangular7

解决方案

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

并且对于您要在模板中使用的每个内容，使用set和，这是最佳实践。getInput()

  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>

推荐阅读