Отображать изображения в умной таблице

Question

Как отобразить изображения в столбце в смарт-таблице? У нас есть несколько столбцов, большинство из которых являются данными, а один столбец имеет изображение. Согласно концепции «умной таблицы» я написал следующий код, который просто показывает 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(){

   }

}

myList.ts

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

]
}

Answer 1

Вам необходимо создать пользовательский компонент

• Сначала создайте компонент

Новый компонент, который будет использоваться в качестве пользовательского компонента (image-thumbnail.column.ts)

import { Component, Input, OnInit } from '@angular/core';
@Component({
 selector: 'image-thumbnail-column',
 template: `
   <div>
     <img [src]="value" />
   </div>
`,
})
export class ImageThumbnailColumn implements OnInit {
  @Input() value: string;
  @Input() rowData: any;
  ngOnInit(): void {
    console.log(this.value);
    console.log(this.rowData);
}
}

• 2-й, добавьте тип: «пользовательский» к столбцу изображения (свойство столбца)

• 3-й, добавьте средства визуализацииComponent: ImageThumbnailComponent (не убедитесь, что его rendererComponent или что-то еще, см. документы смарт-таблицы) к столбцу изображения, это важный шаг, потому что, когда вы устанавливаете тип столбца как настраиваемый, интеллектуальная таблица просматривает это свойство, чтобы отправить информацию о данных таблицы в компонент

Обновлен домашний компонент (home.component.ts)

import { myListDB } from "../../../shared/tables/myList";
import  { ImageThumbnailColumn } from "./image-thumbnail.column.ts";


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: 'custom',
              renderComponent: ImageThumbnailColumn
          },
          brand: {
            title: 'Brand'
          },
          title: {
            title: 'Campaign Name'
          }
      },
  };

  ngOnInit(){

   }

}

• 4, интеллектуальная таблица попытается отправить два объекта Ваш пользовательский компонент, первый из которых - значение, а второй - rawData. Внутри пользовательского компонента необходимо использовать значение @Input (): InterfaceOfValueForColumn; и @Input () rawData: InterfaceOfEachRawData;

• Завершить, убедитесь, что добавили пользовательский компонент к компонентам ввода используемого модуля, например,

  , если модуль, который используется для умной таблицы: home.module.ts

@NgModule({
  ...
  entryComponents: [ImageThumbnailColumn],
  ...
})
export class HomePageModule {
}

. В этой ситуации значение является типом строки и содержит URL-адрес, который отображается на прикрепленном изображении * 1036. *

тогда вы можете показывать эти красивые изображения любым удобным вам способом.

Answer 2

Вот как я решил эту проблему!

home.component.ts (Добавьте 'тип: html' к brandLo go массив изображений как в коде)

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 тег с sr c, указанным как вы введите HTML код)

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

]
}

Теперь ожидаемый результат выглядит следующим образом: