角度顯示錶中的數據不在對象中

我正在使用安裝並運行ngx-datatable的Angular應用程序。我有一個Supplier對象，我需要使用ngx-datatable顯示一個表，其中一些列顯示對象的某些屬性，一些列顯示在對象屬性上動態計算的值。角度顯示錶中的數據不在對象中

這是我的供應商類：

import { Invoice } from '../../invoice/model/invoice'; 
import { MasterData } from '../../master-data/model/master-data'; 

export class Supplier { 
    "createdAt": Date; 
    "createdBy": string; 
    "updatedAt": Date; 
    "updatedBy": string; 
    "id": string; 
    "masterData": MasterData; 
    "invoices": Invoice[]; 
}

這是發票類：

export class Invoice{ 
    "id": string; 
    "number": string; 
    "year": number; 
    "date": Date; 
    "amount": number; 
}

現在我想顯示包含供應商有以下的列清單的表：ID ，createdAt,createdBy,totalAmountOfInvoices,totalNumberOfInvoices。

我的問題來自最後兩列，我不知道如何正確處理。

ngx-datatable期望組件中有rows[]和columns[]，但是當我爲行傳遞Supplier[]時，我不知道應該如何使用計算列。

什麼是顯示該數據的最佳方式？當我檢索服務中的對象時，我應該計算這些值並將它們注入供應商對象中，還是有更好的方法來解決我的問題？

來源

2017-08-03 skatz

計算服務器上的數據並以json形式發送，或者在Angular中實現反序列化器，或者重寫構造器並計算數據。 –

我找到了解決方案。只需使用ng-template而不是將column[]傳遞給表格。這樣我可以在我的組件中調用函數。

  <ngx-datatable [rows]="supplier" class="material"> 
      <ngx-datatable-column> 
       <ng-template let-column="column" ngx-datatable-header-template> 
        <span (click)="sort()">Name</span> 
       </ng-template> 
       <ng-template let-row="row" ngx-datatable-cell-template> 
        {{row.masterData.name}} 
       </ng-template> 
      </ngx-datatable-column> 
      <ngx-datatable-column> 
       <ng-template let-column="column" ngx-datatable-header-template> 
        Invoices({{currentYear}}) 
       </ng-template> 
       <ng-template let-row="row" ngx-datatable-cell-template> 
        {{getNumberOfInvoicesCurrentYear(row)}} 
       </ng-template> 
      </ngx-datatable-column> 
      <ngx-datatable-column> 
       <ng-template let-column="column" ngx-datatable-header-template> 
        Invoices total amount ({{currentYear}}) 
       </ng-template> 
       <ng-template let-row="row" ngx-datatable-cell-template> 
        {{getNumberOfInvoicesCurrentYear(row)}} 
       </ng-template> 
      </ngx-datatable-column> 
     </ngx-datatable>

來源

2017-08-03 10:07:52 skatz

角度顯示錶中的數據不在對象中

回答

相關問題