如何使用Angular async管道调用从异步流接收的函数？错误:操作表达式中不能有管道

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

@Component({
  selector: 'app-example',
  template: `
    <div>{{ data$ | async }}</div>
    <<div>{{ processData(data$ | async) }}</div>
  `
})
export class ExampleComponent {
  data$: Observable<any>;

  constructor() {
    this.data$ = this.getData();
  }

  getData(): Observable<any> {
    // 异步操作获取数据
    return new Observable<any>(observer => {
      setTimeout(() => {
        observer.next('异步数据');
        observer.complete();
      }, 2000);
    });
  }

  processData(data: any): string {
    // 处理数据的函数
    return '处理后的数据：' + data;
  }
}

<div *ngIf="data$ | async as data">{{ processData(data) }}</div>