Angular 显示 table 中的数据而不是对象中的数据

Question

我正在开发一个安装了 ngx-datatable 并且可以正常工作的 Angular 应用程序。我有一个 Supplier 对象，我需要使用 ngx-datatable 显示一个 table，其中一些列显示对象的某些属性，一些列显示根据对象属性动态计算的值。

这是我的供应商class:

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[];
}

这是发票class:

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

现在我想显示一个 table，其中包含一个供应商列表，其中包含以下列：id、createdAt、 createdBy、totalAmountOfInvoices、totalNumberOfInvoices.

我的问题来自最后两列，我不知道如何正确处理。

ngx-datatable 期望组件中有 rows[] 和 columns[]，但是当我为行传递 Supplier[] 时，我不'知道我应该为计算列使用什么。

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

Answer 1

我找到了解决办法。只需使用 ng-template 而不是将 column[] 传递给 table。这样我就可以在我的组件中调用函数了。

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

Angular 显示 table 中的数据而不是对象中的数据

Angular showing data in table not in object

ngx-datatable

angular