Angular，如何使用异步管道处理模板中使用的多个可观察对象

Question

我有以下代码

模板：

   <li *ngFor="let message of messages”>
    …
    …
       <img [src]="getThumbnail$(message) | async”>
   </li>

组件：

private thumbnails$: { [id: number]: Observable<string> } = {};

getThumbnail$(message: Message): Observable<string> {

  if (message.isImage && message.attachedFileId === undefined) {
    return of(this.getImageBase64(imageTiny));
  }

  if (message.gps && message.imageTiny === undefined) {
    return of(this.getPlaceHolderLocation());
  }

  if (this.thumbnails$[message.id] !== undefined) {
    return this.thumbnails$[message.id];
  }
  const thumbnail$ = new BehaviorSubject<string>(this.getImageBase64(message.imageTiny));
  this.thumbnails$[message.id] = thumbnail$;

  this.loadImageAsync(message,thumbnail$); // this loads the big image and emits the result

  return thumbnail$;
}

我想知道是否有更好的方法来管理列表中的可观测对象。 此处地图缩略图$的目的是避免每次角度调用getThumbnail $方法时都生成新的可观察值。

我真的需要保持自己的观察力吗？

我可以“控制” angular调用此方法的方式和时间吗？

谢谢