Question

我在angular app服务中有应返回img blob数据的方法

getPlanImage$(): Observable<any> {
    return this.http.get$(`${this.serviceUrl}/Photo`, 'blob' )
    .pipe(map((response:any) => {
      let reader = new FileReader();
      reader.addEventListener("load", () => {
        return reader.result;
      }, false);
      if (response) {
        reader.readAsDataURL(response);
     }
    }))
  }

我正在这样订阅它：

this.assetService.getPlanImage$().subscribe(data => {
      this.imageToShow = data;
    })

我可以在chrome网络中看到对图像服务的成功调用，但是此行this.imageToShow = data;中的此方法未定义

Answer 1

您必须执行以下操作。

import { fromEvent } from 'rxjs';
import { flatMap, map } from 'rxjs/operators';
...


getPlanImage$(): Observable<any> {
    return this.http.get$(`${this.serviceUrl}/Photo`, 'blob').pipe(
        flatMap((response: any) => {
            let reader = new FileReader();

            if (response) {
                reader.readAsDataURL(response);
            }

            return fromEvent(reader, 'load').pipe(map(() => reader.result));

        })
    );
}

可从eventListener观察到角度返回

1 个答案: