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

と私はクラスにパイプのオブジェクトを挿入します。しかしそれはうまくいかなかった。

そうする方法はありますか？または別のアイデアですか？

P.S.私がそれをしている間の理由は、構成の巨大なリストを持っていることと、それぞれのパイプタイプが異なるため、ハードコード化されているのは難しいでしょう。

は私がベースに適用するためにどのようなパイプを決定する主なパイプを持つことをお勧めしたい

Answer 1

で

import { Pipe, PipeTransform } from '@angular/core'; 

import { IProduct } from '../products/product'; 
@Pipe({ 

    name:'productFilter' 
}) 
export class ProductFilterPipe implements PipeTransform{ 

    transform(value: IProduct[], filterBy: string): IProduct[] { 
     filterBy = filterBy ? filterBy.toLocaleLowerCase() : null; 
     return filterBy ? value.filter((product: IProduct) => 
      product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value; 
    } 


} 

を参照してください。ありがとうございました値：

メインパイプ：

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

Answer 2

サンプルパイプの実装は以下のとおりであるHTML

<tr *ngFor='let product of products|productFilter:listFilter'>