Моя проблема похожа на эту запись stackoverflow
Когда я использую асинхронный канал для просмотра данных из firebase и отображения их на диаграмме, я могу видеть диаграмму, но выводить на консоль нулевую ошибку. Без async pipe все ошибки исчезнут, но я не могу получить данные (да, это асинхронные данные). Помоги мне, пожалуйста.
Это происходит потому, что компонент не может работать со значениями 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>
Пока surveryAnswers observable ничего не испускает, компонент не будет воспроизведен, поэтому ошибки не будет. Когда он излучает, async pipe поймает это, запустит CD, и он больше не будет null - это будет истинное значение, которое затем будет передано в переменную с именем answers, которую мы используем для подачи на results вход компонента. .
ngrx. Я выбираю данные в своем конструкторе и назначаю их Observable<ChartData>.
- person AndreaM16; 17.12.2017
