如何使用自定义管道 Angular2

Question

我有以下 JSON 对象：http://pastebin.com/1TguvZXc

这是我的模型组件 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>

我的 models.component 中的一个（管道？）方法：

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

此外，我想使用 ngx-pipes 中的 FilterByPipe 管道按 models.years.styles.submodel.body 中的类别过滤掉。

我的 HTML 中的代码产生了以下错误：

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

由于您正在导入 pipe 并通过 component 中的按钮调用它，因此您不需要直接在 component 中调用管道。此外，chooseCategory 只是一个 method，而不是 pipe。然后，从以下行中删除 pipe：

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

Answer 2

我认为您甚至没有阅读文档。 Yu 应该以这种方式创建管道：

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

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

然后你可以这样在 HTML 文件中调用它：

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

不要忘记在模块中声明您的管道。

@NgModule({
   declarations: [ SomePipe ]
})

那就是你用的是方法，不是管道。

如果你想执行 pipe depend on (f.e.) button click 你应该用参数构建 Pipe:

   @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...
         }
      }
   }

这样调用这个管道

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

然后你可以在你的组件方法中使用点击按钮

yesOrNo: boolean = false;

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

如何使用自定义管道 Angular2

How to use custom pipes Angular2

json

angular

angular-pipe