在 Angular 8 中，如何将管道集应用为 TS 中的属性？

Question

我想在 mat-table 中设置数据/数组的动态格式。 其中一个功能是通过属性灵活地应用管道。

请看这个：example

现在当我们查看脚本文件：table-basic-example.ts 时，我们看到：

tableDef: Array<any> = [
    {
      key: 'position',
      header: 'Position',
      className: 'something',
                              // I add 2 properties:
                              // -------------------
                              // pipeName - for a name of pipe to apply to a data field value
                              //          - date pipe in this case
                              // pipeParams - parameters for the pipe, in this case: 
                              //              format, timezone, locale (for the date pipe)
                              //              ??? NOT SURE if this format is the best way - ???
      pipeName: 'date',
      pipeParams: "'mediumDate':'+0430':'en-US'",

    }, ...

现在我们转到 HTML 模板/视图文件 - table-basic-example.html，我们有这个部分：

  <ng-container *ngFor="let def of tableDef">
  <ng-container [matColumnDef]="def.key">
    <th mat-header-cell *matHeaderCellDef> {{def.header}} </th>
    <td [ngClass]="def.className" mat-cell *matCellDef="let element"> {{element[def.key]}} </td>
  </ng-container>
  </ng-container>

在呈现数据字段值的行中，我想有条件地应用上面设置的管道：tableDef。在这种情况下，我正在努力使用引号和括号的语法。这是一个简单的尝试，需要您明智地纠正。谢谢。

    <td [ngClass]="def.className" mat-cell *matCellDef="let element">
        {{ (def.pipeName) ? element[def.key] | def.pipeName:def.pipeParams : element[def.key]   }} 
    </td>

所以浏览器会理解为：

    <td [ngClass]="def.className" mat-cell *matCellDef="let element">
        {{ (def.pipeName) ? element[def.key] | date:'mediumDate':'+0430':'en-US' : element[def.key]   }} 
    </td>

尝试的传说是：

• (def.pipeName) - 条件 - 如果字段有属性 - pipeName
• ? - 然后
• element[def.key] - 通过管道传递的字段值
• | - 管道字符 -
• def.pipeName - 该名称的管道
• :def.pipeParams -管道参数
• ： - 否则
• element[def.key] - 字段值原样

加法：

我用这条插值线部分解决了单管 - 日期：

{{ (def.pipeName=='date') ? (element[def.key] | date:def.pipeParams) : element[def.key] }} 

但是，如果我们也可以动态引用管道名称，而不是：

 ...  | date:def.pipeParams

我们会有类似的东西：

 ...  | def.pipeName:def.pipeParams

Answer 1

好吧，改为在 .html 中创建一个大的“switchCase”，您可以为每个数据元素添加一个属性管道

this.data.forEach(x=>{
   switch (x.pipeName)
   {
      case "date":
         x.pipe=new DatePipe('en-US')
         break;
      case "number":
         x.pipe=new DecimalPipe('en-US')
         break;
   }
})

然后就可以使用了

<div *ngFor="let item of data">
  {{item.pipe?item.pipe.transform(item.value,item.params):item.value}}
</div>

另一个是添加属性“formatedData”

this.data.forEach(x=>{
   switch (x.pipeName)
   {
      case "date":
         x.formatedData=formatDate(x.value,x.params,'en-US')
         break;
      case "number":
         x.formatedData=formatNumber(x.value,x.params,'en-US')
         break;
      default:
         formatedData=value;
   }
})