时间戳

首页 > 解决方案 > 如何正确地将不可观察的转换为可观察的？

angular - 如何正确地将不可观察的转换为可观察的？

问题描述

我有一个不可观察的对象，我希望它转换为可观察对象，这样我就可以直接更新图像而不是刷新页面来获取结果，但是我收到以下错误：

Type 'EntityImage[]' is missing the following properties from type 'Observable<EntityImage[]>': _isScalar, source, operator, lift, and 5 more.ts(2740)

.html

<div *ngFor="let image of (images$ | async); let i = index;">
  <img src="{{image.url}}" />
</div>

.ts

export class EntityImage {
  url: string;
}

images$: Observable<EntityImage[]>;

getImages(entity: Entity, format: ImageFormatType): EntityImage[] {
    if (!entity) return [];

    return (entity.images || []).map(img => {
      img.url = this.getImageURL(entity.uid, format, img.uid);
      return img;
    });
  }

  getImageURL(entityUid: string, format: ImageFormatType, imageUid?: string, imageCache?: number): string {
    const path = Entity.getImagePath(entityUid, format, imageUid);
    const url = this.firebaseProvider.getUrl(path);

    return imageCache ? `${url}&imageCache=${imageCache}` : url;
  }

  selectEntity(matEvent: MatAutocompleteSelectedEvent): void {
    this.entity$ = matEvent.option.value;
    // ERROR here
    this.images$ = this.getImages(matEvent.option.value, 'ORIGINAL');
  }

有没有办法在没有上述错误的情况下做到这一点？

标签： angulartypescriptrxjs

解决方案

您应该使用运算符来做到这一点。

import { of } from 'rxjs';

images$: Observable<EntityImage[]>;

getImages(entity: Entity, format: ImageFormatType): Observable<EntityImage[]> {
    if (!entity) return [];

    return (entity.images || []).map(img => {
      img.url = this.getImageURL(entity.uid, format, img.uid);
      return of(img);
    });
  }

推荐阅读