在Angular中填写下拉列表时，正确的选择是什么？

如何解决在Angular中填写下拉列表时，正确的选择是什么？

我正在填写一个列表，并将其传递给另一个组件。该列表用作下拉列表的选项，我不确定填充此列表的正确方法是什么。这是服务方法和相关方法：

service.ts

list(): Observable<CarDto> { }

parent.html

<child-component [cars]="cars" *ngIf="cars && cars.length > 0"> </child-component>

或者我应该使用async吗？

<child-component [cars]="cars$ | async" *ngIf="((cars$ | async) && (cars$ | async)?.length > 0"> </child-component

parent.ts

cars: any;

listCars() {
  this.service.list().subscribe((list: CarDto) => {
    this.cars= list.cars;
});

还是我应该使用async，Promise等？

 cars$: Observable<any>;

 this.cars$ = this.service.list().pipe(shareReplay());

child.ts

@input() cars: any;

此方案的正确方法是什么？由于数据在生命周期中不会更改，因此唯一需要注意的是快速加载父子组件而没有任何问题。另一方面，请记住我的服务方法返回Observable。

解决方法

从最佳实践的角度来看，异步管道是您应该首选的方式。但是在同一个可观察对象上使用异步管道是不好的。请考虑将模板包装在ng-container中，该模板会为您存储值。

<ng-container *ngIf="cars$ | async as cars">
  <child-component [cars]="cars" *ngIf="cars && cars.length > 0"></child-component>
</ng-container>