角度显示表中的数据而不是对象答案

【问题标题】：Angular showing data in table not in object角度显示表中的数据而不是对象
【发布时间】：2017-08-03 08:34:11
【问题描述】：

我正在开发一个安装并运行 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[] 时，我不知道应该为计算列使用什么。

显示该数据的最佳方式是什么？当我在服务中检索对象时，我应该计算这些值并将它们注入到供应商对象中，还是有更好的方法来解决我的问题？

【问题讨论】：

在服务器上计算数据并作为json发送，或者在Angular中实现反序列化器，或者重写构造器，然后计算数据。

标签： angular ngx-datatable

【解决方案1】：

我找到了解决方案。只需使用 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>

【讨论】：