Angular 在角度数据表中显示JSON数据

我想在一个窗口中显示以下JSON数据集

这是到目前为止我的代码

  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>

getBillingCycles（）{
this.BillingCyclesService.getBillingCycles（）
.订阅（（数据）=>{
this.billing=[数据]；
console.log（this.billing）；
});
}
计费周期
链接
{{item.billingcycle}
{{item}}

---

我无法在表中正确显示数据。它只显示[对象，对象]。我只需要在左栏显示对象编号，在右栏显示HREF。

您好，Skydev您的json启动了一个对象，因此您需要分离一个数组并在表中使用该数组

我已经为你创建了stackblitz

Html预览访问您需要访问的示例

mf.data

变量

Html:-

 <tr *ngFor="let item of mf.data; let i=index">
        <td>{{i+1}}</td>
        <td>{{item.href}}</td>
    </tr>

截图：-

---

如果可以完整发布数据集或json数据，则数据集或json数据在哪里。您已经遍历了对象以获取数据。放入计费。_links.self in*ngForiI是本地存储的json数据。我已经在上面完整地展示了它，我想我已经在getBillingCycles（）函数中修改了json的格式，这可能导致了这个问题

 <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);