ng2-smart-table 中单元格内的图像

Question

我使用这个模块在表格中显示数据我不明白的一件事是如何在单元格中呈现图像？？

我想知道，所以我谷歌它，发现我们可以在 ng2-smart-table 中使用自定义组件，但仍然存在一个漏洞（或者我可能没有正确理解？）我将所有数据存储在本地存储 我设法在单元格中添加按钮并打开弹出窗口以选择选项（galary/camera），但我不知道或无法弄清楚如何在单元格中显示？？

所以有人有任何想法吗？？

放一些代码供参考

1) Home.ts（只有 req 的代码）

settings = {
    filter: false,
    sort: false,
    external: 'external',
    edit: {
      editButtonContent: 'Edit', // 'Modifier',
      saveButtonContent: 'Save', // 'Enregistrer',
      cancelButtonContent: 'Cancel', // 'Annuler',
      confirmSave: true
    },
    add: {
      addButtonContent: 'Add a sample', // Ajouter un prélèvement
      createButtonContent: 'Validate', // Valider
      cancelButtonContent: 'Cancel', // Annuler,
      confirmCreate: true
    },
    delete: {
      deleteButtonContent: 'Remove', // 'Supprimer',
      confirmDelete: true
    },
    actions: {
      columnTitle: ''
    },
    mode: 'inline',
    columns: {
      list: {
        title: 'List A/B/C',
        editor: {
          type: 'textarea'
        }
      },
      status: {
        title: 'ABX',
        editor: {
          type: 'textarea',
        }
      },
      paper: {
        title: 'Préco',
        editor: {
          type: 'textarea'
        }
      },
      image: {
        title: 'Photo',
        filter: false,
        type: 'custom',
        renderComponent: ButtonImageComponent,
        defaultValue: 'Photo',
        editor: {
          type: 'custom',
          component: ButtonImageComponent,
        },
      }
    }
  };

2) Home.html

<ng2-smart-table [settings]="settings" (deleteConfirm)="onDeleteConfirm($event)" [source]="data" (editConfirm)="onEditConfirm($event)"
                  (createConfirm)="onCreateConfirm($event)"></ng2-smart-table>

3) Button Component.ts（我在最后一列添加的自定义按钮）

import { Component, EventEmitter,  OnInit, Output } from '@angular/core';
import { ActionSheetController, Platform, Events } from '@ionic/angular';

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

@Component({
  selector: 'app-button-image',
  templateUrl: './button-image.component.html',
  styleUrls: ['./button-image.component.scss'],
})
export class ButtonImageComponent implements OnInit {
   base64Image: any ;

  constructor(public actionSheetController: ActionSheetController,public event: Events, public platform: Platform, public camera: Camera) { }

  ngOnInit() {}
  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Option',
      buttons: [{
        text: 'Take photo',
        role: 'destructive',
        icon: !this.platform.is('ios') ? 'ios-camera-outline' : null,
        handler: () => {
          this.captureImage(false);
        }
      }, {
        text: 'Choose photo from Gallery',
        icon: !this.platform.is('ios') ? 'ios-images-outline' : null,
        handler: () => {
          this.captureImage(true);
        }
      }]
    });
    await actionSheet.present();
  }
  async captureImage(useAlbum: boolean) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      ...useAlbum ? {sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM} : {}
    };

    const imageData = await this.camera.getPicture(options);

    this.base64Image = `data:image/jpeg;base64,${imageData}`;
    this.event.publish('image:selectes', this.base64Image);
    // this.photos.unshift(this.base64Image);

  }
}

4) 及其 HTML

<ion-button (click)="presentActionSheet()">Select</ion-button>

Answer 1

使用 html 代码创建智能表：

<ng2-smart-table [settings]="settings" [source]="source"
  (create)="onCreateConfirm($event)"
  (edit)="onEditConfirm($event)"
  (delete)="onDeleteConfirm($event)"
></ng2-smart-table>

在文件 ...component.ts 中创建设置对象

settings = {
mode: 'external',
add: {
  addButtonContent: '<i class="nb-plus"></i>',
  createButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},
edit: {
  editButtonContent: '<i class="nb-edit"></i>',
  saveButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},
delete: {
  deleteButtonContent: '<i class="nb-trash"></i>',
  confirmDelete: true,
},
columns: {
  name: {
    title: 'Tên',
    type: 'string',
  },
  image: {
    title: 'Hình ảnh',
    filter: false,
    type: 'html',
    valuePrepareFunction: (images) => {
      return `<img class='table-thumbnail-img' src="${images}"/>`
    }
  },
},};

您可以在 style.css 中定义图像的大小或“table-thumbnail-img”类的布局

Answer 2

最后，我想通了。 :)

generatePDF(localData) {
      this.showLoader('Creating PDF');
      // tslint:disable-next-line: prefer-const
      let externalDataRetrievedFromServer = [];
      localData.Tabledata.forEach(element => {
        externalDataRetrievedFromServer.push(element);
      });
      const column = ['Numéro de prélèvement', 'Niveau', 'Pièce', 'Support', 'Matériaux / produit', 'Amiante', 
                    'FCR', 'Délais urgent', 'List A/B/C',
                    'Etat de conversion', 'Préco', 'Résultats labo', 'Photo'];
      const dd = {
        pageSize: 'A2',
        pageOrientation: 'landscape',
        content: [
          {
            alignment: 'justify',
            columns: [
              {
                text:  localData.HeaderData.le !== undefined ? 'Le : ' + moment(localData.HeaderData.le).format('DD/MM/YYYY') : '',
                style: 'header',    margin: [0, 20],
              }
            ]
          },
          externalDataRetrievedFromServer.length > 0 ? this.table(externalDataRetrievedFromServer, column) : {}
        ],
        styles: {
          header: {
            fontSize: 18,
            bold: true
          },
          subheader: {
            fontSize: 15,
            bold: true
          },
          quote: {
            italics: true
          },
          small: {
            fontSize: 8
          }
        }
      };
      this.pdfObj = pdfMake.createPdf(dd);
      if (this.plt.is('cordova')) {
        setTimeout(() => {
          this.hideLoader();
        }, 500);

      } else {
        setTimeout(() => {
            this.hideLoader();
        }, 500);
        this.pdfObj.download();
      }
  }
  buildTableBody(data, columns) {
    const body = [];
    const column_local = ['numero', 'niveau', 'piece', 'support',
    'materiaux', 'amiante', 'fcr', 'delais', 'list', 'etat', 'preco', 'resultats' , 'image'];
    body.push(columns);

    data.forEach( (row) => {
      let dataRow = [];

      column_local.forEach( (column) => {
        if (column === 'image') {
          if (row[column]) {
            dataRow.push({
              // tslint:disable-next-line: max-line-length
              image: row[column],
              fit: [250, 250],
              alignment: 'center',
            });
          } else {
            dataRow.push({});
          }
        } else {
          dataRow.push(row[column]);
        }
      });

      body.push(dataRow);
    });

    return body;
  }
  table(data, columns) {
    return {
      layout: 'lightHorizontalLines', // optional
      table: {
        headerRows: 1,
        // widths: [100, 'auto', 'auto', 'auto','auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
        widths: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'],

        body: this.buildTableBody(data, columns)
      }
    };
  }