Ngx图表无法直接使用角度异步管道加载条形图

Question

我的问题类似于这个stackoverflow post

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

Answer 1

Cause

发生这种情况是因为该组件不能与null的results值一起使用。

Why?

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

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

基于错误跟踪的screeshot，当ngx-charts-bar-vertical设置为results时它看起来像null不起作用然后它会中断。

A fix

在数据不存在时，您根本不需要渲染条形图组件。您可以使用NgIf指令来执行此操作，该指令允许您使用as在模板中进行绑定。对于您希望有条件地显示模板的一部分，然后再次重新使用此值的情况，这非常有用。

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

虽然surveryAnswers observable不会发出任何内容，但该组件不会是rendred，因此不会出错。当它发出时，async管道将捕获它，触发CD并且它将不再是null - 它将是一个真值，然后被送入一个名为answers的变量，我们用它来输入组件的results输入。