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

Posted 2023-03-13

【中文标题】使用 ngOnChanges 将异步数据传递给子组件不起作用

【英文标题】：Pass async data to child component with ngOnChanges does not work

【发布时间】：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); 行，在我拥有之后：

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

【参考方案1】：

你需要检查currentValue是否存在。

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