如何以及何时在 Angular 中正确绑定下拉列表？

Question

我使用以下方法在 Angular 中绑定下拉列表，但我认为我犯了一些错误，因为有时我没有得到预期的行为：演示服务.tsgetProducts(): Observable<ProductDto> { ... }产品.组件.ts：products: ProductDto[] = [];ngOnInit(): void {    this.bindProducts();}bindProducts() {    this.demoService.getProducts()    .subscribe((list: ProductDto) => {        this.products = list;    });    //for testing purpose    const check = this.products;}test() {    this.bindProducts();    //for testing purpose    const test= this.products;}1.列表变量定义是否products: ProductDto[] = [];正确？或者我应该使用一些 Observable 参数来实现这一点？2.我应该填充下拉列表而ngAfterViewInit()不是 吗ngOnInit()？为了更快地加载表格？3.在上面的代码中，我使用了subscribe方法，但是在绑定列表时，我无法让上面的方法this.products填充test()。我认为这很可能是 subscribe 方法，但是我怎样才能让这个变量稍后填充而不是 onInit() 呢？我应该使用toPromise或其他东西吗？正确的方法是什么？

Answer 1

没有“正确”的方式，只有“更好”的方式、“推荐”的方式和“优先”的方式。

下面是我将如何处理它

产品.组件.ts：

export ProductComponent {

  products$ = this.demoService.getProducts();

}

是的，我已经删除了OnInit生命周期挂钩和所有其他代码。我什至还没有声明products$as的类型typescript来推断这一点。

在我的组件中我可以使用async管道

<ng-container *ngIf='products$ | async as products'>

  <!-- My code here -->

</ng-container>

基本上，我们允许 Angular 为我们做一些繁重的工作，比如订阅和取消订阅。

你可以看看这个沙盒演示