angular - 如何将属性绑定与异步数据一起使用？

Question

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

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

尝试以下操作：

<ng-container *ngIf="someData | async as data"> 
   <simplex-chart [numbers]="data"></simplex-chart>
</ng-container>

score 0 · Accepted Answer

如果someData它是可观察的，你可以使用管道 async做这样的事情：

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

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

更新：

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

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

3 回答 3