ngx-data table如何在angualr -6中的数据表中显示嵌套的json数据

Question

在 ngx-data 表中如何循环遍历 ngx-data 表中的嵌套 Json 对象。

json 示例对象：

rows = [
{ name: 'Austin', gender: 'Male', company: 'Swimlane', topings:[
 { id:'101',name:'spinach'}]
 },
{ name: 'Dany', gender: 'Male', company: 'KFC',topings:[
 { id:'102',name:'onion'}] },
{ name: 'Molly', gender: 'Female', company: 'Burger King' ,topings:[
 { id:'103',name:'ginger'}]},

];

在 ngx-datatable 中，我需要如何循环遍历上面的 json 对象中的topings 并在数据表中显示toping 数据。任何人都可以回答我必须如何做到这一点......？

Answer 1

好吧，我的想法是，您需要对数据进行一些操作，然后才能将其呈现在数据表上。

首先，在您的 component.ts 上，您应该定义您的列。

tableColumns = [
  {
    prop: 'name',
    name: 'Name'
  },
  {
    prop: 'gender',
    name: 'Gender'
  },
  {
    prop: 'company',
    name: 'Company'
  },
  {
    prop: 'topingsId',
    name: 'Topings ID'
  }, 
  {
    prop: 'topingsName',
    name: 'Topings Name'
  }
]

接下来，您应该尝试“展平”数据，使其成为单级对象的数组（而不是嵌套它们）。

this.rows = [
  { 
    name: 'Austin', gender: 'Male', company: 'Swimlane', topings:[{ id:'101',name:'spinach'}]
  },
  { 
    name: 'Dany', gender: 'Male', company: 'KFC',topings:[{ id:'102',name:'onion'}] 
  },
  { 
    name: 'Molly', gender: 'Female', company: 'Burger King' ,topings:[{ id:'103',name:'ginger'}]
  }
];

this.rows = this.rows.map(row => ({
  name: row['name'],
  gender: row['gender'],
  company: row['company'],
  topingsId: row['topings'][0]['id'],
  topingsName: row['topings'][0]['name']
}));

console.log(this.rows);

最后但并非最不重要的一点是，在你的 component.html 上，你可以这样渲染你的数据表：

<ngx-datatable class="material" [rows]="rows" [columns]="tableColumns"....></ngx-datatable>

并且不要忘记定义表所需的其他属性。

使用一些 ES6 魔法来分配行数据的其他方法。

1) 使用扩展语法：

this.rows = this.rows.map(row => ({
  ...row,
  topingsId: row['topings'][0]['id'],
  topingsName: row['topings'][0]['name']
}));

2）同时使用扩展语法和对象解构：

this.rows = this.rows.map(row => {
  const {topings, ...others} = row;
  return {
    ...others,
    topingsId: row['topings'][0]['id'],
    topingsName: row['topings'][0]['name']
  };
});

为了回答您关于评论的问题，我们的数据表行和列是动态的，我们必须采用稍微不同的策略。

首先，我们将您的数据展平为一组未嵌套的对象。我们获取每行的配料数组，然后将数组转换为对象。之后，我们使用展开语法将所有内容连接到一个对象中，该对象代表this.rows.

请注意，我们正在使用计算属性名称（另一个 ES6 功能）来提供每个顶部的动态属性键。

this.rows = this.rows.map(row => {
  const {topings, ...others} = row;
  const topingsList = topings.map((toping, index) => ({
    ['toping' + Number(index + 1) + ' Name']: toping['name']
  }));
  topingsObject = Object.assign({}, ...topingsList);
  return { 
    ...others,
    ...topingsObject
  }
});

接下来，从行数据中，我们必须收集新列的数组，这是 ngx-datatable 的必需属性之一。首先，我们的this.tableColumns定义是这样的：

tableColumns = [
  {
    prop: 'name',
    name: 'Name'
  },
  {
    prop: 'gender',
    name: 'Gender'
  },
  {
    prop: 'company',
    name: 'Company'
  }
];

在获得 flattened 后this.rows，我们将获得行数据中可用属性的数组。从那里，我们tableColumns使用动态配料更新（例如 Toping1 名称、Toping2 名称等）

this.rows = this.rows.map(row => { .....}) // continued from the above

const headerNames = Object.keys(Object.assign({}, ...this.rows));
headerNames.map(header => {
  if (header!=='name' && header!=='gender' && header!=='company') {
    this.tableColumns.push({
      prop: header,
      name: header
    });
  }
});