ngx-dataTable 如何应用格式化函数

Question

数据和.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

Answer 1

有一个很好的地方可以找到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.

ngx-dataTable 如何应用格式化函数

ngx-dataTable How to apply format function

javascript

ngx-datatable

angular