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

Question

我的问题类似于此stackoverflow帖子

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

Answer 1

原因

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

为什么？

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

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

根据错误跟踪的快照，ngx-charts-bar-vertical当results设置为时，它似乎不起作用null，然后中断。

修复

没有数据时，您根本不需要渲染条形图组件。您可以利用NgIf指令来执行此操作，该指令允许您使用进行模板绑定as。对于要在条件上显示模板一部分，然后再次使用此值的情况下，超级有用。

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

尽管surveryAnswersobservable不会发出任何东西，但是不会释放该组件，因此不会有任何错误。当它发出时，async管道将捕获该事件并触发CD，它将null不再存在-这将是一个真实值，然后将其馈入一个称为的变量answers，我们将其用于馈入results组件的输入。