Question

我正在努力使用async管道，我需要等待异步数据完成加载才能尝试渲染组件的视图。

我试着看一下这个问题，其中提到了elvis运算符：

Wait for Angular 2 to load/resolve model before rendering view/template

我尝试过{{model?['name']}}，但它似乎没有做任何事情，因为角度静止会引发错误，抱怨无法阅读name的{{1}}。

我在undefined上初始化model，但此时数据尚未完成加载（我认为）：

ngOnInit

然后它试图过早地渲染这个位：

ngOnInit() {

  // If no model is set and the select shouldn't be allowed empty, set the model to the first option
  if (!this.model && !this.allowEmpty) {
    this.model = this.options[0];
  }
  // If it should be allowed empty, set it to null which will add an empty class in the markup
  else if (this.allowEmpty) {
    this.model = null;
  }

  this.onModelChange.emit(this.model);
}

那么实现这一目标的正确方法是什么？我可以在组件类中设置一些东西，以允许异步数据在渲染视图之前完成加载吗？

Answer 1

您无法将?与[]

一起使用

如果您使用

*ngFor="let option of options | async">

然后在

中option

{{option.name}}

始终具有值，因为<li ...尚未发送数据时不会呈现options。

{{option?.name}}

将是一个有效的用途，并做你似乎打算做的事情，但如上所述，它不应该是必要的。

等待渲染组件视图之前加载异步数据

1 个答案: