Question

我已经使用此模块在表中显示数据，我不了解的一件事是如何在单元格中渲染图像？

我想知道所以我用它搜索了一下，发现我们可以在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

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

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

2 个答案: