不显示异步的自定义管道

Question

我正在尝试使用ID来获取用户数据。管道接收ID，并使用一项服务，该服务根据ID请求用户数据并返回Observable用户数据。

这是管道：

export class UserPipe implements PipeTransform {

  constructor(private userService: UserService) {}

  transform(value: number): Observable<User> {


      return this.userService.getFriendBy(value)
 }

}

我尝试如下使用管道：

<h2 float-left>{{  (chat.user_to_chat_id | user)?.first_name | async }}</h2>