angular - ngx-datatable 如何以 Angular -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 对象中的顶部并在数据表中显示顶部数据。任何人都可以请回答我必须如何做....??

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) 使用 Spread Syntax :

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

2) 同时使用扩展语法和 Object Destructuring :

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

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

首先，我们将您的数据展平为一组未嵌套的对象。我们得到每一行的浇头数组，然后我们将数组转换成一个对象。之后，我们使用扩展语法将所有内容连接到一个对象中，该对象表示 this.rows 中的一行。 .

请注意，我们正在使用 Computed Property Names (又一个 ES6 特性)提供每个 toping 的动态属性键。

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'
  }
];

在我们获得扁平化的 this.rows 之后，我们将获得行数据中可用的属性数组。从那里，我们更新 tableColumns使用动态浇头(例如 Toping1 Name、Toping2 Name、..etc)

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