我想在angular-data-table显示以下JSON数据集
{"_links":{"self":[{"href":"http://uni/api/v1/cycle1"},{"href":"http://uni/api/v1/cycle2"},{"href":"http://uni/api/v1/cycle3"}]}}
这是到目前为止我的代码
getBillingCycles() {
this.BillingCyclesService.getBillingCycles()
.subscribe((data) => {
this.billing = [data];
console.log(this.billing);
});
}
<table class="table table-striped" [mfData]="billing" #mf="mfDataTable" [mfRowsOnPage]="5">
<thead>
<tr>
<th style="width: 30%">
<mfDefaultSorter by="billingcycle">Billing Cycle</mfDefaultSorter>
</th>
<th style="width: 70%">
<mfDefaultSorter by="link">Link</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mf.billing">
<td>{{item.billingcycle}}</td>
<td>{{item}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
我不能在表中正确显示数据。这只是表明[目标,对象]。我只需要显示在左边的列和对象数量在右列中的HREFs。
嗨Skydev所以你需要单独的数组,并使用数组中的表您的JSON是启动的对象。
我创建stackblitz你。
https://stackblitz.com/edit/angular-data-table-muthu-yso865
HTML预览参观的例子,你需要访问mf.data
变量。
HTML: -
<tr *ngFor="let item of mf.data; let i=index">
<td>{{i+1}}</td>
<td>{{item.href}}</td>
</tr>
码:-
data={"_links":{"self":[{"href":"http://uni/api/v1/cycle1"},{"href":"http://uni/api/v1/cycle2"},{"href":"http://uni/api/v1/cycle3"}]}};
console.log("Data",this.data._links.self);
截图: -