Comment utiliser des tuyaux personnalisés Angular2

Question

je l'objet JSON suivant: http://pastebin.com/1TguvZXc

Voici mes modèles de composants HTML:

<button *ngFor="let category of categories" (click)="chooseCategory(this.category)" type="button" name="button" class="btn btn-default" id="{{category}}"> 
    {{category}} 
</button> 
<div *ngFor="let model of models?.models"> 
    <div *ngFor="let year of model['years']"> 
    <div *ngFor="let style of year['styles'] | chooseCategory"> 
     {{model.name}}, {{style.submodel.body }} 
    </div> 
</div> 

A (pipe?) Méthode de mon models.component :

chooseCategory(selectedCategory: string): void { 
    if((selectedCategory === '')) { 
     this.filterByPipe.transform(this.models, 
        ['models.years.styles.submodel.body'], selectedCategory); 
    } 
} 

de plus, je voudrais utiliser le pépin FilterByPipe e de ngx-pipes pour filtrer par catégorie dans models.years.styles.submodel.body.

Le code HTML de mon roduces l'erreur suivante:

Unhandled Promise rejection: Template parse errors: 
The pipe 'chooseCategory' could not be found ("or="let model of models?.models"> 
    <div *ngFor="let year of model['years']"> 
    <div *ngFor="let s[ERROR ->]tyle of year['styles'] | chooseCategory"> 
     {{model.name}}, {{style.submodel.body }} 

Answer 1

Je pense que vous ne lisez même la documentation. Yu devrait créer tuyau de cette façon:

@Pipe({ 
    name: 'somePipe' 
}) 
export class SomePipe { 

    transform(value: any[]): any[] { 
     //some transform code... 
    } 
} 

et peut vous appeler dans le fichier HTML de cette façon:

<div *ngFor="let elem of elements | somePipe"></div> 

Ne pas oublier de déclarer votre tuyau dans le module.

@NgModule({ 
    declarations: [ SomePipe ] 
}) 

C'est ce que vous utilisez est une méthode, pas un tuyau.

Si vous voulez tuyau exécuter dépendez (fe) bouton clic, vous devez construire pipe avec l'argument:

@Pipe({ 
     name: 'somePipe' 
    }) 
    export class SomePipe { 
     transform(value: any[], args: any[]): any[] { 
     let someFlag: boolean = false; 
     if(args && args[0]) someflag = true; 
     if(someflag) { 
      //some transform code... 
     } 
     } 
    } 

pour appeler cette conduite de cette manière

<div *ngFor="let elem of elements | somePipe : yesOrNo"></div> 

et pouvez-vous utiliser dans la méthode de votre composant pour cliquer sur le bouton

yesOrNo: boolean = false; 

onClickButton(event: any) { 
    event.preventDefault(); 
    yesOrNo = !yesOrNo; 
} 

Answer 2

Depuis que vous importez la pipe et de l'appeler d'un bouton dans votre component, vous n'avez pas besoin d'appeler le tuyau directement dans votre component. En outre, chooseCategory est juste un method, pas un pipe. Ensuite, retirez le pipe de la ligne suivante:

<div *ngFor="let style of year['styles'] | chooseCategory">