如何从模板中的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))
    );
  }