需要对7号可观察异步管道的帮助

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(sucess['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>