在 Angular 7 Observable 异步管道上需要帮助

Question

我正在尝试通过 API 调用实现页面源等待

    public responseTop: Observable<any>;
    this.responseTop = this.productSRV.topEquipments();
    this.responseTop.toPromise().then(sucess => {
        this.topEquipments = sucess['data'];
        // console.log('eq');
        // console.log(this.topEquipments);
        this.newsletterForm.controls.recaptchaReactive.setValue(sucess['message']);
      }).catch(error => {
        console.log('Error!', error);
    });

  <ng-container *ngFor="let topEq of topEquipments;">

因为API调用了两次，怎么放|异步等待 SEO 的页面源 如果我把

  <ng-container *ngIf="responseTop | async">

仍然不会在页面源中加载

Answer 1

一旦你调用.then你第一次执行它，当你使用async它第二次执行它。

问题是 - 期望的行为是什么？

我建议将它们组合在一起：

public responseTop: Observable<any>;
this.responseTop = this.productSRV.topEquipments().pipe(
  // side effect
  tap(success => this.newsletterForm.controls.recaptchaReactive.setValue(success['message'])),   

  // mapping result to the array we need
  tap(console.log),
  map(success => success['data']),

  // catching error
  catchError(error => {
    console.log('Error!', error);
    throw error;
  }),
);

<ng-container *ngIf="responseTop | async as topEquipments">
  <ng-container *ngFor="let topEq of topEquipments">
    {{ topEq | json }}
  </ng-container> 
</ng-container>