使用 AngularFire 和 Firestore 使用 Ng2 Smart Table 显示嵌套对象

Question

以上是我在 Firebase 的 Firestore 数据库中的数据结构。我可以使用这些设置成功提取数据并将其放入 ng2 smart table：

export const userTableSettings = {
  delete: {
confirmDelete: true,
deleteButtonContent: '<i class="ft-x danger font-medium-1 mr-2"></i>'
  },
  add: {
confirmCreate: true,
  },
  edit: {
confirmSave: true,
editButtonContent: '<i class="ft-edit-2 info font-medium-1 mr-2"></i>'
  },
  firstName: {
title: 'Full Name',
  },
  lastName: {
title: 'User Name',
  },
  email: {
title: 'Email',
  },
},
  attr: {
    class: 'table table-responsive'
  },
};

但是当我为角色添加位置时

roles: {
    title: 'Role',
},

输出是

我希望能够显示一个或多个用户角色，并且能够从 table.

更新它们

Answer 1

由于您获得的 roles 数据是一个对象（而不是原始类型，例如字符串、数字、布尔值等），您应该使用 renderComponent 属性。它将允许您传递自定义组件以呈现到单元格中（即类型应为 custom）。

查看文档 https://akveo.github.io/ng2-smart-table/#/documentation (search for renderComponent in the page) and the proposed example (https://github.com/akveo/ng2-smart-table/blob/master/projects/demo/src/app/pages/examples/custom-edit-view/advanced-example-custom-editor.component.ts)

使用 AngularFire 和 Firestore 使用 Ng2 Smart Table 显示嵌套对象

Display Nested Object with Ng2 Smart Table using AngularFire and Firestore

firebase

typescript

ng2-smart-table

google-cloud-firestore

angular5