一种解决方法是使用 RxJS 的 pipe 操作符代替 async pipe，在 pipe 中添加第一个操作符 tap。这样就可以使用这个 observable 的值并执行副作用。

例如，我们有以下模板：

  
{{ item.name }}

我们现在想要在模板中显示每个项目的类型，但又不想修改 components。我们可以在组件类中创建自定义 observable，它包含想要添加的类型。并在模板中使用 tap 操作符订阅这个自定义 observable 并显示类型。

  

   {{ item.name }}
   {{ item.type$ | async }}
  

在组件类中，创建自定义 observable：

import { Component } from '@angular/core';
import { from, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-items',
  template: `
    

      

        {{ item.name }}
        {{ item.type$ | async }}
      
    
  `,
})
export class ItemsComponent {
  items$ = from([
    { name: 'Apple', color: 'red', type$: this.createTypeObservable('fruit') },
    { name: 'Carrot', color: 'orange', type$: this.createTypeObservable('vegetable') },
  ]);

  private createTypeObservable(type: string): Observable {
    return new Observable((observer) => {
      setTimeout(() => {
        observer.next(type);
      }, 1000);
    }).pipe(
      tap(() => console.log('Type emitted for item'))
    );
  }
}