Ngx-charts 无法在 angular 中使用异步管道直接加载条形图
Ngx-charts can't load bar charts directly with async pipe in angular
我的问题与此类似
当我使用async pipe从firebase观察数据并显示在图表中时，我可以看到图表但在控制台提示null错误。没有异步管道，所有错误都消失了，但我无法获取数据（呃，这是异步数据）。请帮助我。
原因
发生这种情况是因为该组件无法使用 results 的 null 值。
为什么？
正如您所说，当您不想（或不需要）在组件代码中订阅，而是在模板中订阅时，使用异步管道。然而，管道是一个纯函数：每次调用时都必须 return 某些东西。
当数据从服务器到达之前调用异步管道时，管道 returns null，没有更好的价值可以提供。
根据错误跟踪的屏幕截图，当 results 设置为 null 时，ngx-charts-bar-vertical 似乎不起作用，然后中断。
修复
当数据不存在时，您根本不需要呈现条形图组件。您可以通过使用 NgIf 指令来执行此操作，该指令允许您在模板中使用 as 进行绑定。对于这些您想要有条件地显示模板的一部分，但随后再次使用该值的情况非常有用。
<ngx-charts-bar-vertical *ngIf="surveyAnswers | async as answers"
[results]="answers"
></ngx-charts-bar-vertical>
虽然 surveryAnswers observable 不发射任何东西，组件不会被渲染，因此不会有错误。当它发出时，async 管道将捕获它，触发 CD，它不再是 null——它将是一个真值，然后被输入一个名为 answers 的变量我们用来输入组件的 results 输入。
我的问题与此类似
当我使用async pipe从firebase观察数据并显示在图表中时，我可以看到图表但在控制台提示null错误。没有异步管道，所有错误都消失了，但我无法获取数据（呃，这是异步数据）。请帮助我。
原因
发生这种情况是因为该组件无法使用 results 的 null 值。
为什么？
正如您所说，当您不想（或不需要）在组件代码中订阅，而是在模板中订阅时，使用异步管道。然而，管道是一个纯函数：每次调用时都必须 return 某些东西。
当数据从服务器到达之前调用异步管道时，管道 returns null，没有更好的价值可以提供。
根据错误跟踪的屏幕截图，当 results 设置为 null 时，ngx-charts-bar-vertical 似乎不起作用，然后中断。
修复
当数据不存在时，您根本不需要呈现条形图组件。您可以通过使用 NgIf 指令来执行此操作，该指令允许您在模板中使用 as 进行绑定。对于这些您想要有条件地显示模板的一部分，但随后再次使用该值的情况非常有用。
<ngx-charts-bar-vertical *ngIf="surveyAnswers | async as answers"
[results]="answers"
></ngx-charts-bar-vertical>
虽然 surveryAnswers observable 不发射任何东西，组件不会被渲染，因此不会有错误。当它发出时，async 管道将捕获它，触发 CD，它不再是 null——它将是一个真值，然后被输入一个名为 answers 的变量我们用来输入组件的 results 输入。