如何在 Angular 10 中使用异步管道检索数据后执行一些操作

Question

我使用异步管道来绑定数据，如下所示：（Angular 10）

应用程序组件.html：

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody *ngFor="let customer of customers | async">
        <tr>
            <td>{{customer.id}}</td>
            <td>{{customer.name}}</td>
        </tr>
    </tbody>
</table>

应用程序组件.ts：

constructor(private customersService: CustomersService) { }
    customers:Observable<any>;
    ngOnInit() {
        this.customers = this.customersService.getCustomers();
      }

这里我调用 getCustomers() 方法，该方法通过 http GET 方法从 api 获取数据并分配给 customer observable。

它工作正常。我想在从 api 检索数据后执行一些操作。

那么如何使用异步管道来实现这一点呢？

Answer 1

您可以将运算符通过tap管道输入到源以执行一些副作用。

ngOnInit() {
  this.customers = this.customersService.getCustomers().pipe(
    tap(res => {
      // do something with `res`
    })
  );
}

将对来自可观察对象的每个通知执行其中的操作tap，并且不会影响源通知。

工作示例：Stackblitz