ngFor Angular2中的动态管道

Question

我正在编写Angular4应用程序。我有一个包含值和管道类型的数组。（地区，语言或号码）

const values = [
   { value: 'us', pipe: 'regions'},
   { value: 'en', pipe: 'language'},
   { value: '100', pipe: 'number'},
.....
];

我想制作一个ngFor，以便我可以显示值并应用正确的管道：（类似这样）

<li *ngFor="let item of values"> {{item.value | item.pipe}} </li>

我试图建立一个类：

export class FacetConfiguration {
  value: string;
  pipe: Pipe;
}

然后将管道的对象注入类。但是没有用。

有这种方法吗？或其他想法？

PS我这样做的原因是，我有大量的配置列表，并且每个配置都有不同的管道类型，因此硬编码会很困难。

谢谢

Answer 1

我建议有一个主管道，该管道根据值决定要应用的管道：

主管：

const values = [
   { value: 'us', pipe: new RegionPipe},
   { value: 'en', pipe: new LanguagePipe},
   { value: '100', pipe: new NumberPipe},
.....
];

并在转换功能中：

trasform(value): any {
   for(let val of values) {
      if(val.value === value) {
          return val.pipe.transform(value);
      }
   }
   return '';
}

您还可以将另一个管道作为选项传递给主管道：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{'some text'| main: test}}</h2>
    </div>
  `,
})
export class App {
  name: string;
  test = new TestPipe;
  constructor() {

  }
}

@Pipe({name: 'main'})
export class MainPipe implements PipeTransform {
  transform(value: any, p: any): any {
    return p.transform(value);
  }
}

@Pipe({name: 'test'})
export class TestPipe implements PipeTransform {
  transform(value: any): any {
    return 'test';
  }
}