conduite dynamique dans ngFor Angular2

Question

Je programmation d'une application Angular4. J'ai un tableau contient des valeurs et un type de tuyau. (Régions, langue ou nombre)

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

et je veux faire un ngFor donc je peux afficher la valeur et appliquer la conduite correcte: (quelque chose comme ça)

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

j'ai essayé de construire un class:

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

et j'injecte un objet du tuyau à la classe. Mais cela n'a pas fonctionné.

est-il une telle façon de le faire? ou une autre idée?

P.S. la raison alors que je fais cela est que j'ai une liste énorme de configurations et chacun d'eux a un type de conduite différent, donc codé en dur sera un peu difficile.

merci

Answer 1

Je suggère d'avoir une conduite principale qui décide ce tuyau à appliquer sur la base la valeur:

tuyau principal:

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

et en fonction de transformation:

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

vous pourriez également passer un autre tuyau en option à votre conduite principale:

@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

mise en œuvre du tuyau d'échantillon est donnée ci-dessous s'il vous plaît se référer

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


} 

en HTML

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