尝试调用方法时未定义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

似乎您希望在分配this.assumptions值后立即呈现assumps模板，并期望立即呈现该DOM。 但事实并非如此。 如果我的假设是错误的，请纠正我。

相反，你可以考虑创建QueryList （特殊可观察）的AssumptionsComponent你这么做的时候ViewChild查询。 之后，您可以关注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)
        )
    })        
}