javascript - Ngx-charts 无法直接使用异步管道以 Angular 加载条形图

Question

我的问题与此类似stackoverflow post

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

Answer 1

原因

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

为什么？

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

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

根据错误跟踪的屏幕截图，它看起来像 ngx-charts-bar-vertical在 results 时不起作用设置为 null然后它就坏了。

修复

当数据不存在时，您根本不需要呈现条形图组件。您可以使用 NgIf 来做到这一点指令，它允许您使用 as 在模板中进行绑定(bind).对于您想要有条件地显示模板的一部分，但随后再次使用该值的情况，这非常有用。

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

同时 surveryAnswers observable 不会发出任何东西，组件不会被渲染，因此不会有错误。当它发出时，async pipe 会捕捉到它，触发 CD，它不会是 null不再——它将是一个真值，然后被输入一个名为 answers 的变量中我们用来输入 results组件的输入。