Question

我有一个不可观察的对象，并且希望将其转换为可观察的对象，因此我可以直接更新图像，而不必刷新页面来获取结果，但是却出现以下错误：

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');
  }

有没有一种方法可以解决上面的错误？

Answer 1

您应该使用of运算符来执行此操作。

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);
    });
  }

Answer 2

您可以将selectEntity更改为此：

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

如何将非可观察者正确地转换为可观察者？

2 个答案: