Как использовать привязку свойств к асинхронным данным?

Question

Я пытаюсь подключить существующий интерфейс к новому фону.Один из компонентов внешнего интерфейса имеет следующий шаблон:

<simplex-chart [numbers]="someData"></simplex-chart>

Существующий внешний интерфейс - это скорее прототип, в котором данные являются статическими.В новом выпуске данные больше не статичны, а поступают из баз данных через сервисы.Следовательно, привязка свойств выше не работает.Как я могу адаптировать его для асинхронной передачи данных?Я видел такие конструкции, как {{somedata |async}} но я не нашел способа связать это со свойством ввода.Любое предложение ?Большое спасибо заранее, Николас

Answer 1

Попробуйте использовать @Input()numbers: number[] = [];, чтобы иметь пустой массив в качестве значения по умолчанию, когда у вас еще нет данных от родителя.

Answer 2

попробуйте следующее:

<ng-container *ngIf="someData | async as data"> 
   <simplex-chart [numbers]="data"></simplex-chart>
</ng-container>

Answer 3

Если someData это и можно наблюдать, вы можете использовать трубу async сделать что-то вроде этого:

<simplex-chart [numbers]="someData | async"></simplex-chart>

Подробнее об асинхронности канала здесь:

https://angular.io/api/common/AsyncPipe

Обновление:

Видя, что simplex-chart использует @Input() numbers: number[], вы можете добавить ngIf, пока данные не будут загружены. Это будет выглядеть примерно так:

<simplex-chart *ngIf="someData" [numbers]="someData"></simplex-chart>