angular - Ng2智能表,从一个对象中获取多列

标签 angular typescript2.0 ng2-smart-table

我正在使用 ng2 智能列来显示包含用户对象的交易。 我想在不同的列中显示 id 用户、姓名和电子邮件。 我该怎么做?

settings = {
    add: {
      addButtonContent: '<i class="nb-plus"></i>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmCreate : true
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmSave : true
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    columns: {
      id: {
        title: 'ID',
        type: 'number',
      },
   
      user: { 
        title : 'name',
      valuePrepareFunction: (data) => {
                                   return data.email;
                               },
       },

      amount: {
        title: 'Valeur',
        type: 'number',
       
      },
      items: {
        name: { title: 'Nom' },
    },

      state: {
        title: 'Etat',
        type: 'string',
      },
      delivery_date: {
        title: 'Date de livraison',
        type: 'string',
      },
      expedition_date: {
        title: 'Date d\'expedition',
        type: 'string',
      },
    },
  };

在这个链接上查看 https://stackblitz.com/edit/example-ng2-smart-table-ytzrns?file=src/app/app.component.ts

最佳答案

这是解决方案

  
   'user.firstName': {
    title: 'Name',
    valuePrepareFunction: (cell, row) => { return row.user.firstName }
  },

  
    'user.lastName': {
    title: 'Last name',
    valuePrepareFunction: (cell, row) => { return row.user.lastName }
  },
    'user.address': {
    title: 'address',
    valuePrepareFunction: (cell, row) => { return row.user.address }
  },
    'user.email': {
    title: 'email',
    valuePrepareF

关于angular - Ng2智能表,从一个对象中获取多列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64318710/

相关文章:

angular - Angular 8 不支持 @nguniversal/express-engine

html - Angular <ng-content> 和 Shadow DOM 之间有什么关系

css - ng-deep 用于自定义导致 css 冲突的 mat-tab-header

用于输入的 Angular Material 2 颜色

javascript - 操作 Angular 2 中 HTML 元素的位置

javascript - 使用 typescript 获取服务器端数据

javascript - 创建一个接口(interface),其键是枚举的值

angular - 如何使用复选框在 ng2-smart-table 组件中选择多行?

ng2-smart-table - 如何在行单击时将 View 模式从 View 更改为编辑?

angularjs - 每当添加新行时,如何在 ng2-smart-table 中使用 post 方法?