如何在 html 中实现异步管道，但在返回数据时仍然能够调用函数

Question

我在 angular 5 中实现了一个异步管道。它按预期工作，但我希望能够在数据从 returned 时调用一些函数并分配变量后端（即设置 seo 详细信息、广告定位）

在不使用异步管道的情况下，我像这样调用了服务：

    this._dataService.send(new BrochureRequest(this._stateService.params.propertyId)).subscribe((httpResponse) => {
     this.httpResponse$ = httpResponse;
        // do more stuff
     });

但是，对于异步管道，我看不到如何选择对打字稿中的 return 数据执行任何操作。

这就是我实现异步管道的方式：

打字稿

this.httpResponse$ = this._dataService
      .send(new BrochureRequest(this._stateService.params.Id));

html

 <div *ngIf="httpResponse$ | async as httpResponse; else loading">
       {{httpResponse | json}}
 </div>

 <ng-template #loading>
     loading ...
 </ng-template>

有什么想法吗？

Answer 1

使用点击运算符

The tap operator is useful for side effects or changes that don’t relate directly to the returned value of the Observable

this.httpResponse$ = this._dataService
          .send(new BrochureRequest(this._stateService.params.Id)).pipe(tap(data=> console.log(data)));

如何在 html 中实现异步管道，但在返回数据时仍然能够调用函数

How to implement an async pipe in html but still be able to call functions when data is returned

javascript

ecmascript-5

angular