Отображение данных 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>

IЯ не могу правильно отобразить данные в таблице.Это просто показывает [объект, объект].Мне просто нужно отобразить номер объекта в левом столбце и ссылки в правых столбцах.

Answer 1

Привет, Skydev, ваш json запускает объект, поэтому вам нужно разделить массив и использовать этот массив в таблице.

Я создал стек для вас.

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

снимок экрана: -