Question

在 componentOne.ts 中，我通过 sharedService 发送数据，

  this.sharedService.sendData(this.getCheckedProduct);

在 componentTwo.ts 中，我正在订阅数据，例如

      productList: any = [];

      getAllProducts: any = [];

      ngOnInit() {
        this.sharedService.getData().subscribe(data => {
          this.productList = data;
          this.getProduct();
        });
      }

我要在产品列表中获取数据，然后需要调用具有以下内容的函数this.getProduct()，

  getProduct() {
    let tempArray = [];
    this.productList.forEach(element => {
        this.appService.getRest(AppConfig.settings.product.getProducts + '/' + element.product_obj_id).subscribe(res => {
          tempArray.push(res.data);
        });
    });
    this.getAllProducts = tempArray;
  }

我需要传递ID element.product_obj_id以获得该ID的必要数据。

我已经尝试这样更改上面的内容，

  ngOnInit() {
    this.sharedService.getData().subscribe(data => {
      data.forEach(element => {
        this.getProduct(element);
      })
    });
  }

  async  getProduct(element) {
    let asyncResult = await this.appService.getRest(AppConfig.settings.product.getProducts + '/' + element.product_obj_id).toPromise();
    this.getAllProducts.push(asyncResult['data']);
  }

我在async getProduct(element)函数内部，获取this.getAllProducts的数据，但是在html中，我没有获取数据。

HTML：

<div *ngFor="let product of getAllProducts">
 Getting data
</div>

如果我通过 async

更改了以上内容

<div *ngFor="let product of getAllProducts | async">
 Getting data
</div>

我收到错误消息，

ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'
    at invalidPipeArgumentError

要详细说明，我需要通过componentone中的sharedservice发送数据并在componenttwo中接收它，然后需要从该共享服务数据中获取product_obj_id。

在传递每个ID时，我将获取该特定产品的数据，并且需要将从this.appService.getRest(AppConfig.settings.product.getProducts + '/' + element.product_obj_id).toPromise();收到的最终数据存储到 getAllProducts 。.

AppConfig.settings.product.getProducts

是网址..

如何以异步方式实现它。至此，我正在获取数据

this.getAllProducts.push(asyncResult['data']);

但是在函数之外，我没有得到值，而且getAllProducts也不再适用于html中的任何情况。

在方案1 中，我在此问题的顶部进行了解释

this.getAllProducts = tempArray;

这给空数组作为值，所以只有我尝试使用async函数。

简而言之，我需要从this.getAllProducts获取最终数据，该数据将通过get方法从service接收，为此我需要在网址中传递ID。

Answer 1

像这样简单地在异步调用中分配数据-

getProduct() {
    let tempArray = [];
    this.productList.forEach(element => {
        this.appService.getRest(AppConfig.settings.product.getProducts + '/' + element.product_obj_id).subscribe(res => {
          tempArray.push(res.data);
          this.getAllProducts = tempArray; // Here
        });
    });
  }

PS：在您的用例中，无需使用管道async。

Answer 2

AsyncPipe将应用于Observable。对于您而言，我认为您是将其应用于getAllProducts的{{1}}上。因此，您会收到该错误。

可能的解决方案：

从Array的for循环中删除async
让getAllProducts返回您的产品

getAllProducts

注意：由于要遍历Observable并调用webapi来获取产品，因此可能必须使用productList。

解决方案2样本：

我认为解决方案2最适合您，因为您mergeMap包含了所有产品，您需要使用它们访问webapi以获得产品的详细信息。

了解MergeMap here

示例代码（未经测试，您需要添加代码以使用productList处理错误）：

catchError

说明：

由于您import { from } from 'rxjs'; import { mergeMap, map, combineAll } from 'rxjs/operators'; this.getAllProducts = from(this.productList) .pipe( mergeMap(element => this.appService.getRest(AppConfig.settings.product.getProducts + '/' + element.product_obj_id).pipe( map(res => res['data']) ) ), combineAll() ) <div *ngFor="let product of getAllProducts | async"> Getting data </div是productList，因此您必须遍历该对象并为该Array中的每个product对象触发一个请求

Array使from(this.productList)中的每个对象变为可观察对象。我们添加了productList，并使用pipe可以触发每个mergeMap的请求，因此您在product中看到this.appService.getRest(AppConfig.settings.product.getProducts + '/' + element.product_obj_id)。然后，我们从Webapi中mergeMap map，仅使用response返回数据。最后，我们res['data']的响应返回一个combineAll，并将其设置为Observable<[]>，因此getAllProducts是一个getAllProducts，我们可以使用Observable在上面。

编辑：

在您的AsyncPipe中而不是在constructor中添加以下内容

ngOnit

如何在角度使异步功能？

2 个答案: