Angular 2图像src作为函数返回

Question

在我的 Angular 2 应用程序中，我有一个用户列表“Users:any”，其中包含以下属性:姓名、工作、年龄...等。问题是要获取个人资料图像，我必须获取 ID从 Users 对象中提取图像，然后使用 Web 服务 getImage(ImageId)，所以我的 html 中有这个:

<div *ngfor="let user of users">
    <img [src]="getImage(user.profileImageId)"/>

在这种情况下，我无法显示个人资料图片，我认为 html 在加载数据之前？

Answer 1

如果解析图像 url 的网络服务返回一个 Observable，你必须解析它。因此，要使用一种方法来完成此操作，您可以使用异步管道:

组件:

getImage(id): Observable<string> {
    return http.get(url/id);
}

模板:

<img [src]="getImage(user.profileImageId) | async" />