在 *ngFor Angular 4 上返回带有函数显示的图像答案

【问题标题】：Return image with function show on *ngFor Angular 4在 *ngFor Angular 4 上返回带有函数显示的图像
【发布时间】：2018-04-24 04:02:44
【问题描述】：

我在component.ts中有一个函数如下：

getImage(name) {
  this._productService.getImage(name).subscribe((response) => {
  // ??? my problem is here
  });
}

它在这里被调用

        <tr *ngFor="let i of data">
          <td>{{ i.id }}</td>
          <td><img [src]="getImage(i.image)" alt=""></td>
          <td>{{ i.name }}</td>
          <td>{{ i.price }}</td>
        </tr>

那么，我的函数如何返回图像？

P/S：我的服务从 API 获取图像确保正常运行。

感谢您的帮助！

【问题讨论】：

你打算在函数getImage()中做什么
getImage(i.name) 将从我定义的 Url 返回一个图像（每个 url 都是一个图像，并且由 i.name 不同）
你现在有什么问题？
不知道组件中的函数如何返回图片？
您可以在 teamviewer 中使用吗？

标签： image angular function service components

【解决方案1】：

在你的 onInit 中使用下面的代码，

this._productService.index().subscribe((data) => {
      this.data = data;
      console.log(data);
    },
      (error) => {
        console.log(error);
      },
      () => {
        this.data.forEach((element: IProduct) => {
          element.image = element.image === null ? '' : this._productService.getImage((element.image));
        });
      });

在 teamviwer 中工作

【讨论】：