将JSON数据绑定到html angularjs数据表

时间:2017-11-03 06:37:04

标签: javascript html json angular

我是角色的新手,目前我已经使用html和angular创建了一个数据表,你们可以帮助我如何将JSON数据绑定到这个表中......我的脚本如下

html脚本

<div class="container-fluid">

<div class="row">
  <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
    <page-title [title]=pageTitle></page-title>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <data-table [dataTable]="dataTable" ></data-table>
  </div>
</div>

ts脚本

  export class UploadsComponent implements OnInit {

  pageTitle = '<i class="fa fa-table fa-fw"></i>Uploads';

  dataTable: DataTable;

  constructor() { 
  }

  ngOnInit() {
    this.initDataTable();
  }

  initDataTable() {

    let startDateHeader = new DataTableHeader();
    startDateHeader.text = 'Start Date';
    startDateHeader.dataType = DataTableColumnDataType.DATE;

    let uploadtypeHeader = new DataTableHeader();
    uploadtypeHeader.text = 'Upload Type';

    let statusHeader = new DataTableHeader();
    statusHeader.text = 'Status';

    let modifiedDateHeader = new DataTableHeader();
    modifiedDateHeader.text = 'Modified Date';
    modifiedDateHeader.dataType = DataTableColumnDataType.DATE;

    let descriptionHeader = new DataTableHeader();
    descriptionHeader.text = 'Description';

    this.dataTable = new DataTable();
    this.dataTable.headers = [startDateHeader, uploadtypeHeader, statusHeader, modifiedDateHeader, descriptionHeader];

  }

}

这是我得到的输出表

enter image description here

所以任何人都可以给我一些指导如何正确地将数据绑定到这个JSON中的表

0 个答案:

没有答案