angular2 - 管道错误答案

【问题标题】：angular2 - pipe errorangular2 - 管道错误
【发布时间】：2016-11-28 03:37:23
【问题描述】：

我有这个PipeGalleryFilter.ts：

import { Pipe,Injectable,PipeTransform } from '@angular/core';
@Pipe({
    name: 'galleryfilter',
    pure: false
})
@Injectable()
export class PipeGalleryFilter implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.type.indexOf(args[0].type) !== -1);
    }
}///@@

然后我将它添加到我的Gallery:

html

<masonry-brick class="brick50" *ngFor="let brick of bricks | galleryfilter: gallery_args">
  <img src="{{brick.img}}" alt="">
</masonry-brick>

gallery_args = {type: 'magazine'};

bricks = [
     {title: 'Brick 1',img:"assets/img/img003.jpg",type: "magazine"},
     {title: 'Brick 2',img:"assets/img/img004.jpg",type: "magazine"},
     {title: 'Brick 3',img:"assets/img/img005.jpg",type: "newspaper"},
     {title: 'Brick 4',img:"assets/img/img003.jpg",type: "newspaper"},
     {title: 'Brick 5',img:"assets/img/img004.jpg",type: "newspaper"},
     {title: 'Brick 6',img:"assets/img/img005.jpg",type: "newspaper"},
     {title: 'Brick 1',img:"assets/img/img003.jpg",type: "movies"},
     {title: 'Brick 2',img:"assets/img/img004.jpg",type: "commercials"}, 
     {title: 'Brick 3',img:"assets/img/img005.jpg",type: "commercials"},
     {title: 'Brick 4',img:"assets/img/img003.jpg",type: "commercials"},
     {title: 'Brick 5',img:"assets/img/img004.jpg",type: "lifestyle"},
     {title: 'Brick 6',img:"assets/img/img005.jpg",type: "lifestyle"}
   ];

但我不断得到：

例外：./Gallery 类库中的错误 - 内联模板：22:39 原因：无法读取未定义的属性“类型”

我有点怀疑这与return items.filter(item => item.type.indexOf(args[0].type) !== -1); 行有关，但我不确定如何正确处理。

我该如何解决这个问题？

【问题讨论】：

标签： angular angular2-pipe

【解决方案1】：

由于gallery_args 是一个对象（正如您在问题中所示），而不是array，所以gallery_args[0] 当然是未定义的。

将您的transform 函数修改为：

transform(items: any[], args: any): any { // Note that the type of args should be any or {}
  return items.filter(item => item.type.indexOf(args.type) !== -1);
}

【讨论】：