Angular管道中处理异步数据

需求

将图片的相对路径作为参数请求接口返回一个图片URL，这样直接放到img标签上面渲染图片，由此想到使用自定义管道的功能；

实现

// minio.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { lastValueFrom } from 'rxjs';
import { NzMessageService } from 'ng-zorro-antd/message';

@Pipe({ name: 'minioFormat' })
export class MinioPipe implements PipeTransform {
  constructor(private http: _HttpClient, private msg: NzMessageService) {}
  async transform(value: string): Promise<string> {
    const res = await this.getMinioUrlPromise(value);
    if (res.ret === '-1') {
      this.msg.error(res.desc);
      return;
    }
    return res.data;
  }
  getMinioUrlPromise(fileUrl: string) {
    return lastValueFrom(
      this.http.post('/pc/sysservice/queryShareUrl', {
        obj: {
          fileUrl,
        },
      }),
    );
  }
}

模板中使用：<img [src]=“item.ufmpFileUrl | minioFormat” alt=“” />

报错：http://localhost:4200/[object%20Promise] 404 (Not Found)，

原因: 因为他是异步的数据，只能在传递给 then() 方法的回调函数中访问已解决的值；

解决： 使用async管道，<img [src]=“item.ufmpFileUrl | minioFormat | async” alt=“” />

async 管道会订阅一个 Observable 或 Promise，并返回它发出的最近一个值。 当新值到来时，async 管道就会把该组件标记为需要进行变更检测。当组件被销毁时，async 管道就会自动取消订阅，以消除潜在的内存泄露问题。