Angular 在第8章中，如何在TS中应用管道集作为属性？

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

请看一下这个：

现在，当我们查看脚本文件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'",

    }, ...

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

 ...  | date:def.pipeParams

我们会有类似于：

 ...  | def.pipeName:def.pipeParams

那么，您可以在.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>

---

所有可能的值都需要一个大的“开关盒”。这不能动态完成，因为它不能与AoT一起工作。但是，您可以将该切换案例放入一个新管道，该管道将管道名称和参数作为其参数，然后调用正确的管道。当管道具有依赖项时，手动创建管道实例将成为一个麻烦，因此我可能会创建切换案例管道并注入所需的管道，以让DI处理它。

 ...  | date:def.pipeParams

 ...  | def.pipeName:def.pipeParams

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>

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;
   }
})