如何使用 summaryFunc/summaryTemplate 格式化 ngx-datatable 中的汇总值？

Question

I implemented ngx-datatable in my angular project and I need to display the summary row for my table. Base on the document, I used [summaryFunc] and the summary value is showing correctly. But now I need to format this value. For example: 1,000 USD instead of 1000.

How can I do that with[summaryFunc] ?

• [summaryFunc] = "sampleFunc | number" => not working, it say result of sampleFunc not a number (I also returned number inside sampleFunc).

• I tried to use DecimalPipe inside sampleFunc => not working, because inside sampleFunc everything is undefined (this and all pipe...).

• I also tried to use [summaryTemplate]="sampleTemplate". samplateTempate is defined by ng-template. But I dont know how to passing the summary value into sampleTemplate?

 <ngx-datatable #table class="material" [headerHeight]="40" [footerHeight]="40" [columnMode]="'flex'" [rowHeight]="'auto'" [summaryRow]="hasSummaryRow" [summaryHeight]="45" (resize)="onResize($event)" (reorder)="onReorder($event)" (activate)="onActive($event)" [loadingIndicator]="!items" [limit]="pageItems" [rows]="items" [count]="totalItems" [externalPaging]="externalPaging" [offset]="offset" (page)="onPaging($event)"> <ngx-datatable-column *ngFor="let col of displayedColumns; let i=index" [name]="col.value" [flexGrow]="calculateWidth(col)" [sortable]="!col.columnType" [canAutoResize]="true" [resizeable]="!col.columnType" [summaryFunc]="sampleFunc" [summaryTemplate]="sampleTemplate"> </ngx-datatable-column> </ngx-datatable> <ng-template #sampleTemplate let-value="value"> <span>{{value|number}}</span> </ng-template>

Answer 1

Finally I my self found the answer for this... Inside the summaryFunc I just need to declare new pipe to format the number.

• First, we create new custom pipe to format the number base on your requirement. Refer to this post https://medium.com/better-programming/creating-a-custom-pipe-for-your-angular-app-64b419a93f2a .
• Second, inside summaryFunc, we create new instand of custom pipe by const customePipe = new CustomPipe();
• Finnaly, we format the value by transform method of customePipe by call customPipe.transform(value);