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

Question

我在 table 中使用此模块显示数据，但我不明白的一件事是如何在单元格中渲染图像？？

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

所以有人知道吗？？

放一些代码供参考

1) Home.ts（仅要求的代码）

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) 按钮 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

我终于明白了。 :)

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)
      }
    };
  }

Answer 2

使用 html 代码创建智能 table：

<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' class 的布局

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

Image inside cell in ng2-smart-table

angular

ng2-smart-table