angular - ngFor 内的 AsyncPipe 用于项目

Question

如何在 ngFor 中使用 AsyncPipe 或者什么是完成对列表项的异步调用的最佳实践？

示例:假设我有一个产品订单，我想显示产品的制造商。但是制造商需要从存储(localstorage)加载才能显示。我最初的解决方案如下(未经测试的伪代码):

HTML:

<ol>
  <li *ngFor="let prod of order.toProducts">
    {{ prod.Name }}: {{ DisplayManufacturer(prod) | async }}
  </li>
<ol>

typescript :

public async DisplayManufacturer(prod: product) {
    let manufacturer = await this.storageService.Load(prod.manufacturerId);
    if (manufacturer) {
        return manufacturer.name + ' (' + manufacturer.address + ')';
    }
    return "";
}

这当然会导致无限循环。

我的下一个解决方案是，在 ngOnInit 中遍历所有订单及其所有产品，以找到制造商并将它们存储在 Map 中以供以后在表达式中使用.

我觉得应该有更好的解决方案 - 因为这还没有结束:我还必须实现 DoCheck 来检查是否有任何产品数组或制造商更改并重新加载所述 map 。这适用于每个类似引用的字段。

Answer 1

您不需要使用 async/await 或在显示之前加载所有数据。向 product 类型添加一个字段，并分配一个可解析为所需数据的 Promise 或 Observable。

服务

Load(id: any): any {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(`Manufacturer id [${id}], name, address`);
        }, Math.random() * 5000 + 2000);
    });
}

组件

ngOnInit() {
    for (let i = 1; i < 10; i++) {
        this.order.toProducts.push(
            { Name: 'ProdName' + i, manufacturerId: i, data: this.storageService.Load('manufacturerId#' + i) },
        );
    }
}

模板

<ol>
  <li *ngFor="let prod of order.toProducts">
    {{ prod.Name }}: {{ prod.data | async }}
  </li>
<ol>

完整的工作示例:https://stackblitz.com/edit/angular-gpqvuu