0

我正在开发一个安装并运行 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 期望组件中有 arows[]和 a columns[]，但是当我Supplier[]为行传递 a 时，我不知道应该为计算的列使用什么。

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

4

1 回答 1

0

我找到了解决方案。只需使用 ng-template 而不是将 a 传递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-03T10:07:52.223 回答