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

标签 javascript angular ecmascript-5

我已经在 Angular 5 中实现了一个异步管道。它按预期工作,但我希望能够在从后端返回数据时调用一些函数并分配变量(即设置 SEO 详细信息、广告定位等)

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

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

但是,使用异步管道,我看不到如何选择对 typescript 中的返回数据执行任何操作。

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

typescript

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>

有什么想法吗?

最佳答案

使用点击运算符

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)));

关于javascript - 如何在html中实现异步管道,但在返回数据时仍然能够调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52646249/

相关文章:

javascript - 如何使用 Rxjs 解决 Angular 2 中的以下用例

angular - 无法从另一个组件/Angular 4 中的 auth.service 访问错误消息

javascript - Array.every 返回 false 而不是类型错误

javascript - scrollTop 和 scrollLeft 在显示 :none elements 上不起作用

javascript - 鼠标进入时继续滚动

javascript - 如何识别设备并使用个人电脑设备代码和移动设备(ios 或 android)的第二个代码?

angular - 从不同的仓库导入组件

javascript - 在 reducer 函数中更改 targetArray.length 时的 targetArray.reduce 行为

javascript - 使用 Webpack 将 TypeScript 转为 es5

javascript - 使字符串驼峰式命名的函数