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

Question

我使用异步管道来绑定(bind)数据，如下所示:(Angular 10)

app.component.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>

app.component.ts:

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

Here I am calling getCustomers() method, which fetch data from api viahttp GET method and assigning to customers observable.

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

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

Answer 1

您可以输入 tap运算符到源以执行一些副作用。

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

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

工作示例:Stackblitz