angular - 使用 asyncPipe 渲染数据

Question

我有函数 renderImagePreview()为我提供文件的字符串表示。显然，这个函数是异步的。

private renderImagePreview(file: File): Observable<any> {
    const reader = new FileReader();
    const fileReaderObs = new Observable((observer: any) => {
      reader.onload = () => {
        observer.next({ imagePath: reader.result as string });
        observer.complete();
      };
    });
    if (file) {
      reader.readAsDataURL(file);
    }
    return fileReaderObs;
  }

我用了renderImagePreview()父函数的内部订阅:

public onImagePicked(event: Event): void {
    const file = (event.target as HTMLInputElement).files[0];
    if (file) {
      this.compressor.compress(file)
        .pipe(
          catchError(error => {
            return of(new Error(error));
          }),
          flatMap(image => {
            return of({
              renderFunction: this.renderImagePreview(image),
              image
            });
          })
        )
        .subscribe(
          (response) => {
            this.imagePreview = response.renderFunction;
            this.updateImageInForm(response.image);
          },
          (error) => { throw new Error(error); }
        );
    }
  }

正如在我的 HTML 中预期的那样，我使用这个表达式来呈现数据:

<div class="image-preview" *ngIf="imagePreview">
    <img [src]="imagePreview | async">
</div>

有些事情我做错了，但我不知道是什么。有任何想法吗 ？

尝试 1

更改:observer.next(reader.result as string);

更改 html:

<div class="image-preview">
<img [src]="imagePreview | async" [alt]="form.value.title">
</div>

结果 HTML:<img _ngcontent-wja-c5="" src="null" alt="null">

Answer 1

我认为你应该在发射时使用 { imagePath: reader.result as string } :

[src]="(imagePreview | async)?.imagePath"

或

改变

observer.next({ imagePath: reader.result as string });

收件人:

observer.next(reader.result as string);