尝试调用方法时，ViewChild组件未定义

Question

我正在从数据库中检索数据并且数据已准备就绪我正在尝试使用ViewChild绑定到子元素，以便将obj数据传递给子元素

问题是组件没有“准备好”，所以我设置了超时2秒。

这感觉不对。我怎么知道子组件是否准备好了。

父组件从数据库中检索数据

 @ViewChild("assumps") assumps: AssumptionsComponent
 getProposalAmounts() {
    this.targets.getProposalAmounts().subscribe((data) => {
    this.assumptions = data.assumptions;

    setTimeout(() => {
      this.assumps.setAssumptionsForm(this.assumptions);
    }, 2000)

在子组件内部

setAssumptionsForm(obj: Assumptions) {
if (obj != null) {
  this.assumptionsObj = obj;
}

没有超时，子项为null;错误读取Cannot read property 'setAssumptionsForm' of undefined

谢谢

Answer 1

您可以为组件创建服务并订阅它。当您执行子构造函数时，您将为您的服务发出一个事件，让父母知道他已准备好。

在我看来，这是最好的解决方案。

另一种方法是将数据作为子组件的输入传递，并在缺少数据时创建加载器。

我实际上更喜欢第一个，因为它是一个更可重用的方法:)

Answer 2

您似乎希望在分配assumps值后立即渲染this.assumptions模板，并期望立即渲染该DOM。但它不会以这种方式发生。如果我的假设是错误的，请纠正我。

相反，当你进行QueryList查询时，你可以考虑创建AssumptionsComponent的ViewChild（特殊Observable）。后来你可以留意QueryList Observable changes财产。此后，您可以直接通过#assumps模板变量进行更改（DOM删除和添加）。

@ViewChild("assumps") assumps: QueryList<AssumptionsComponent>;


getProposalAmounts() {
    this.targets.getProposalAmounts().subscribe((data) => {
    this.assumptions = data.assumptions;
}

ngOnInit () {
    this.assumps.changes((list) => {
        list.forEach(assump => 
          assump.setAssumptionsForm(this.assumptions)
        )
    })        
}