在 Angular 中，当我们使用 map 操作符来转换我们的 Observable 数据流时，async 管道可能无法正常工作。这是因为 map 操作符会返回一个新的 Observable，它不会自动订阅原始的 Observable。

为了解决这个问题，我们需要手动订阅 map 操作返回的 Observable，并将其作为 async 管道的输入。以下是一个示例：

在组件中：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-my-component',
  template: '{{ data$ | async }}'
})
export class MyComponent implements OnInit {
  data$: Observable;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.data$ = this.http.get('https://jsonplaceholder.typicode.com/posts').pipe(
      map(data => data[0].title)
    );
    this.data$.subscribe();
  }
}

在上面的代码中，我们手动订阅了 map 操作返回的 Observable，并将其作为 async 管道的输入。

这样做之后，即可正常使用 async 管道来消费 Observable 数据流了。