ngx-dataTable 如何应用格式函数

问题描述

数据和 .TS：

export class AppComponent {
  name = "Angular " + VERSION.major;

  public allFruits = [
    { f: 1,detail: "Banana is good for health." },{ f: 2,detail: "It is sweet." }
  ];

  fruitName = fruitS;

  public first10(n: string): string {
    return n.substring(0,10);
  }

  colSpec = [
    { prop: "f",name: "fruit" },// "fruitName[f]" or `${fruitName[f]}` won't work
    { prop: "detail" } // maybe need a pipe?
  ];
}

enum fruitS {
  Apple = 0,Banana,Melon
}

.HTML：

<b>PLAIN</b>
<table>
  <tr *ngFor="let f of allFruits">
    <td>{{fruitName[f.f]}}</td>
    <td>|&nbsp;{{first10(f.detail)}}</td>
  </tr>
</table>

<br>
<b>ngx</b>
<ngx-datatable [rows]="allFruits" [columns]="colSpec">
</ngx-datatable>

请参阅StackBlitz demo

解决方法

有一个非常好的地方可以找到demos of ngx-datatable。

需要使用ng-template来应用格式和其他功能：

HTML：

<ngx-datatable 
  [rows]="allFruits" 
  class="material striped" 
  [columnMode]="'force'"  
  >
    <ngx-datatable-column name="f" headerClass="header">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" 
          let-value="value" let-row="row">
         {{ fruitName[value] }}
      </ng-template>    
      </ngx-datatable-column>

    <ngx-datatable-column name="detail" headerClass="header">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" 
          let-value="value" let-row="row">
        {{ first10(value)|uppercase }}
      </ng-template>
      </ngx-datatable-column>
</ngx-datatable>

打字稿：

 public allFruits = [
    { f: 0,detail: "Banana is good for health." },{ f: 1,detail: "It is sweet." }
  ];

  fruitName = fruitS;

  public first10(n: string): string {
    return n.substring(0,10);
  }

  public numToString(n: number): string {
    //alert(n);
    return this.fruitName[n];
  }

The example can be seen here.