angular - 在 ng 智能表中显示图像

Question

如何在 ng 智能表的列中显示图像？我们有许多列，其中大部分是数据，一列有图像。根据 ng smart table 的概念，我编写了以下代码，它只显示一个 URL 代替图像中的图像。

home.component.html

<ng2-smart-table [settings]="settings" [source]="notifications"></ng2-smart-table>

home.component.ts

import { myListDB } from "../../../shared/tables/myList";


export class MyBookingsComponent implements OnInit {

  public pageTitle = "My Home Page";

  public notifications = [];

  constructor() {
    this.notifications = myListDB.data;
}

  public settings = {
      editable:false,
      actions: {
          position: 'right',
          add: false,
          edit: false,
          delete: false
      },
      columns: {
          no: {
              title: 'No'
          },          
          brandlogo: {
              title: 'Brand Logo',
          },
          brand: {
            title: 'Brand'
          },
          title: {
            title: 'Campaign Name'
          }
      },
  };

  ngOnInit(){

   }

}

我的列表.ts

export class myListDB {
    static data = [
      {
        no: 1,
        brandlogo: "assets/images/brands/brand1.jpg",
        brand: "ABC Company",
        title: "XYZ Campaign"
      }

]
}

标签： angulartypescriptangular8

Answer 1

这就是我解决这个问题的方法！

home.component.ts（如代码中所示，将'type: html'添加到brandLogo图像数组）

import { myListDB } from "../../../shared/tables/myList";


export class MyBookingsComponent implements OnInit {

  public pageTitle = "My Home Page";

  public notifications = [];

  constructor() {
    this.notifications = myListDB.data;
}

  public settings = {
      editable:false,
      actions: {
          position: 'right',
          add: false,
          edit: false,
          delete: false
      },
      columns: {
          no: {
              title: 'No'
          },          
          brandlogo: {
              title: 'Brand Logo',
              type: 'html'
          },
          brand: {
            title: 'Brand'
          },
          title: {
            title: 'Campaign Name'
          }
      },
  };

  ngOnInit(){

   }

}

myList.ts（添加img标记，并在 HTML 代码中指定 src）

export class myListDB {
    static data = [
      {
        no: 1,
        brandlogo: "<img src='assets/images/brands/brand1.jpg' class='imageClass'>",
        brand: "ABC Company",
        title: "XYZ Campaign"
      }

]
}

现在预期的结果如下：