如何对异步数据使用属性绑定？

Question

我正在尝试将现有的前端与新的后端连接。前端组件之一具有以下模板：

<simplex-chart [numbers]="someData"></simplex-chart>

现有的前端是一个静态数据的原型。在新版本中，数据不再是静态的，而是通过服务来自数据库。因此，上面的属性绑定不再起作用。 我如何才能使其适应异步数据传输？我见过类似{{somedata |异步}}，但是我没有找到任何将其绑定到输入属性的方法。 有什么建议吗？ 提前谢谢了， 尼古拉斯

Answer 1

如果someData可以观察到，则可以使用管道 async进行如下操作：

<simplex-chart [numbers]="someData | async"></simplex-chart>

有关管道异步的更多信息在这里：

https://angular.io/api/common/AsyncPipe

更新：

看到simplex-chart使用@Input() numbers: number[]，您可以添加ngIf直到加载数据。看起来像这样：

<simplex-chart *ngIf="someData" [numbers]="someData"></simplex-chart>

Answer 2

当您还没有来自父级的数据时，请尝试使用@Input()numbers: number[] = [];将空数组作为默认值。

Answer 3

尝试以下操作：

comments