【问题标题】:How to populate JSON data using ngx-datatable in angular 4如何在角度 4 中使用 ngx-datatable 填充 JSON 数据
【发布时间】:2018-02-19 06:33:09
【问题描述】:

我是 Angular 4 的新手,我正在尝试按照 ngx-datatable github 中定义的方法来实现 ngx-datatble,并且我能够填充表格,但是当我尝试从一个 JSON 对象。 行和列数组与“名称”属性绑定,并显示为标题。但在实际的 JSON 中,我们将采用驼峰式命名约定。如何使用适当的标头填充该数据。

请指教,任何帮助将不胜感激..!!!

提前致谢

请在下面找到我的代码:

HTML

<div>
  <ngx-datatable
    [rows]="rows"
    [columns]="columns">
  </ngx-datatable>
</div>

TS 文件

rows = [
    { Firstname: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
];
columns = [
    { prop: 'Firstname' },
    { name: 'Gender' },
    { name: 'Company' }

];

目标 JSON

[{
  "firstName":"abc",
  "lastName":"xyz",
  "address_1":"lorem ipsum",
  "address_2":"and so on"
},{
  "firstName":"abc",
  "lastName":"xyz",
  "address_1":"lorem ipsum",
  "address_2":"and so on"
},{
  "firstName":"abc",
  "lastName":"xyz",
  "address_1":"lorem ipsum",
  "address_2":"and so on"
}]

【问题讨论】:

标签: angular angular-datatables ngx-datatable


【解决方案1】:
columns = [
    { 
       prop: 'Firstname', // prop will bind to the json property
       name : 'First Name' // You can define the name here 
                          // ( Column label. If none specified, it will use the prop value and decamelize it. )
    },
    { name: 'Gender' },
    { name: 'Company' }

];

更多详情:Read

【讨论】:

    猜你喜欢
    • 2015-09-04
    • 1970-01-01
    • 2023-04-01
    • 2020-08-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-03
    相关资源
    最近更新 更多