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

Question

我使用以下方法在 Angular 中绑定下拉列表，但我认为我犯了一些错误，因为有时我没有得到预期的行为：

演示服务.ts

getProducts(): 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 {&nbsp; products$ = this.demoService.getProducts();}是的，我已经删除了OnInit生命周期挂钩和所有其他代码。我什至还没有声明products$as的类型typescript来推断这一点。在我的组件中我可以使用async管道<ng-container *ngIf='products$ | async as products'>&nbsp; <!-- My code here --></ng-container>基本上，我们允许 Angular 为我们做一些繁重的工作，比如订阅和取消订阅。你可以看看这个沙盒演示