Question

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

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

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

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

1 个答案: