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

Posted

技术标签:

【中文标题】使用 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);
    

【讨论】:

以上是关于使用 ngOnChanges 将异步数据传递给子组件不起作用的主要内容,如果未能解决你的问题,请参考以下文章

是否有将上下文数据传递给@Asynchronous ejb调用的干净方法?

将新数据传递给可能仍在使用旧数据的异步线程函数

Angular2 - 将 ASYNC 数据传递给子组件

如何使用 axios all 将 axios 响应数据传递给 vue 3

vue的组件和生命周期

在同一视图中使用多个模型时将表单数据传递给模型