javascript - Ngx-charts 无法直接用角度的异步管道加载条形图

Question

我的问题与此类似stackoverflow帖子

当我使用异步管道观察来自firebase的数据并将其显示在图表中时，我可以看到图表但在控制台中提示空错误。没有异步管道，所有错误都消失了，但我无法获取数据（嗯，它是异步数据）。请帮帮我。

Answer 1

原因

发生这种情况是因为该组件无法null使用results.

为什么？

正如您所说，当您不想（或不需要）订阅组件代码时使用异步管道，而是在模板中进行订阅。然而，管道是一个纯函数：每次调用它时都必须返回一些东西。

当异步管道在数据从服务器到达之前被调用时，管道返回null，没有更好的价值可提供。

根据错误跟踪的截图，当设置为时它看起来ngx-charts-bar-vertical不起作用，然后它会中断。resultsnull

一个修复

当数据不存在时，您根本不需要渲染条形图组件。您可以通过使用该NgIf指令来做到这一点，该指令允许您在模板中使用as. 对于您希望有条件地显示模板的一部分但随后再次重新使用此值的情况非常有用。

<ngx-charts-bar-vertical *ngIf="surveyAnswers | async as answers"
                         [results]="answers"
></ngx-charts-bar-vertical>

虽然surveryAnswersobservable 不会发出任何东西，但组件不会被渲染，因此不会有错误。当它发出时，async管道会捕捉到它，触发 CD 并且它不会再出现null了——它将是一个真实值，然后将它输入到一个名为的变量answers中，我们用它来results输入到组件的输入中。