如何从模板中的 Observable 函数中获取价值 - Angular

Question

我想在 *ngFor 循环期间从可观察函数中的请求中获取 Blob 对象。 我有一个小型聊天应用程序，它从服务中获取数据并将其打印在视图中。 一种消息是图像。 当我尝试从服务器获取 Blob 时，该函数返回我的null （如果我在模板中使用异步）或[object Object]如果我不使用异步。 如何正确返回这些数据？

我使用 Angular 8

HTML 模板

<div class="row message_chat_row" *ngFor="let chatMessage of chatMessages | async">
    <div class="col chat_message_outer align-self-center">
        <div class="row" [ngClass]="getChatMessageRowClass(chatMessage.sender_type)">
            
<div *ngIf="chatMessage.type === 'text' || chatMessage.type === 'info'" [innerHTML]="chatMessage.value" class="conpeek_chat_message_inner"></div>
            
<div *ngIf="chatMessage.type === 'image'" class="chat_message_inner">
                <a (click)="downloadImg()"><img [src]="getImageSrc(chatMessage.value)"></a>
            </div>
            
<div *ngIf="chatMessage.type === 'file'" class="chat_message_inner">
                <a (click)="downloadFile()">{{chatMessage.filename}}</a>
            </div>
        </div>
    </div>
</div>

聊天组件

getImageSrc(img_url):Observable<any> {
    console.log('GET IMGAGE SRC', img_url);

    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': $c.params.token
    });
    

    return this.httpClient.get(img_url, {
      responseType: "blob",
      headers: headers
    }).pipe(
      map(res => URL.createObjectURL(res))
    );
  }