在angular-data-table中显示JSON数据

Question

中显示以下 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>

我无法在 table 中正确显示数据。它只是显示 [object, object]。我只需要在左列中显示对象编号，在右列中显示 hrefs。

Answer 1

嗨 Skydev，您的 json 是一个对象，因此您需要分离一个数组并在 table 中使用该数组。

我已经为你创建了 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);

截图：-

在angular-data-table中显示JSON数据

Display JSON data in angular-data-table

typescript

angular-datatables

angular