使用 ngOnChanges 将异步数据传递给子组件不起作用答案

【问题标题】：Pass async data to child component with ngOnChanges does not work使用 ngOnChanges 将异步数据传递给子组件不起作用
【发布时间】：2019-11-13 06:52:48
【问题描述】：

按照this tutorial，正是解决方案n 2，我尝试以这种方式将异步数据传递给子组件：

父组件 ts：

ngOnInit() {
    this.route.queryParams.subscribe(params => { 
   this.networkService.getAttivitaById(this.idAttivita).subscribe((att:Attivita[]) => {
          this.attivita = att[0];
        })
  }

父组件html：

<app-dettaglio-attivita [attivita]="attivita" [isModifica]="isModifica" [intervento]="intervento"></app-dettaglio-attivita>

然后是子组件：

@Input() attivita: Attivita;
[...]

ngOnChanges(changes: SimpleChanges) {
    if(changes['attivita']){
      this.initPage();
      console.log("LOADED " + this.attivita.id);
    }
  }

当我转到页面时，在控制台中按顺序打印：

无法读取未定义的属性“id”

参考console.log("LOADED " + this.attivita.id); 行，在我拥有之后：

它似乎抓住了两倍的变化。但是这两个变化是什么？在教程中没有关于这个的消息。我怎样才能在没有错误的情况下处理这个问题？

【问题讨论】：

标签： angular typescript angular7 angular-components

【解决方案1】：

你需要检查currentValue是否存在。

ngOnChanges(changes: SimpleChanges) {
    const { attivita } = changes;
    if (attivita && attivita.currentValue) {
      this.initPage();
      console.log("LOADED " + this.attivita.id);
    }
}

【讨论】：