ngFor 内的 AsyncPipe 用于项目

Question

如何使用AsyncPipe 内部或ngFor最佳实践来完成对列表项的异步调用？

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

HTML：

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

打字稿：

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

这当然会导致无限循环。

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

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

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