ngx-data table 如何以角度 -6 显示数据 table 中的嵌套 json 数据

Question

在 ngx-data table 如何循环遍历 ngx -data table.

中的嵌套 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 对象中的配料并在数据 table 中显示配料数据。任何人都可以回答我必须怎么做....？

Answer 1

好吧，我的意思是，您需要先对数据进行一些操作，然后才能在数据上呈现它table。

在您的 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'
  }
]

接下来，您应该尝试 'flatten' 使您的数据成为单级对象数组（而不是让它们嵌套）。

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 上，您可以这样呈现数据table：

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

并且不要忘记定义您的 table 需要的其他属性。

使用一些 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']
  };
});

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

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

请注意，我们正在使用 Computed Property Names（另一个 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'
  }
];

在我们获得扁平化后 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
    });
  }
});

Answer 2

好吧，我认为有一种更简单的方法，是的，它非常简单。只需执行以下操作：

假设您有一个这样的嵌套 json 对象：

    data = {
        "id": 1,
        "name": "John Doe"
        "comments": [
            {"id":1, "content": "Some content" },
            {"id":2, "content": "Some content" }
        ]
    };

在您的 HTML 模板中：

<ngx-datatable-column name="Comment" prop="comments">
    <ng-template let-value="value" ngx-datatable-cell-template>
        <span>{{value.content}}</span>
    </ng-template>  
</ngx-datatable-column>

ngx-data table 如何以角度 -6 显示数据 table 中的嵌套 json 数据

ngx-data table how to display nested json data in data table in angualr -6

ngx-datatable

angular