angular - 当数据尚不存在时，如何处理从父组件到子组件的可观察数据

Question

我有一个父级，它通过订阅可观察对象从数据库获取数据。

我的问题是我有一个子组件在其 ngOnInit 方法中使用来自父组件的数据。这会产生错误，因为渲染子组件时数据还不存在。

在下面，我收到错误，因为我从可观察到的“disciplines”尚未返回。但是子级已被渲染，并且 ngOnInit 此时正在访问一个空数组。

如果我用值对规则进行硬编码，而不是等待可观察对象返回数据，则效果很好。

所以问题是，在子组件的 ngOnInit 访问数据之前，如何确保数据在我的变量中。

在父级中，我在 ngOnInit 方法中有这个:

      this.disciplines = [];

      let getOptions = this.service.getOptions().subscribe((data: any) => {
          this.populateOptions(data);
        });
   ...

  populateOptions(data: any): void {
    this.disciplines = data['disciplines'];

  }

在 parent 模板中

   <cmp-child 
      [disciplines]="disciplines" 
    </cmp-child>

在子组件的ngOnInit中，

ngOnInit(): void {
    this.populateOptions()
  }

  populateOptions(): void {
    this.advanced = this.disciplines.filter(d => d.isAdvancedDiscipline === true).map(m => m.id);
    console.log("disciplines: ", this.disciplines);

  }

谢谢

汤姆

Answer 1

仅当 discipline 具有值时，您才可以更改父组件的模板以呈现子组件:

  <cmp-child *ngIf="disciplines"
     [disciplines]="disciplines" 
  </cmp-child>

这样，您的子组件仅在 discipline 有值(value)时才会被实例化和初始化。这也意味着当将 discipline 设置回 null 或未定义时，您的子组件将被销毁。