angular2 - pipe error

debugcn Published at Dev

sooon

I have this 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);
    }
}///@@

then I add it to my 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"}
   ];

But I keep getting:

EXCEPTION: Error in ./Gallery class Gallery - inline template:22:39 caused by: Cannot read property 'type' of undefined

I kind of suspect it has something to do with the line return items.filter(item => item.type.indexOf(args[0].type) !== -1);, but I am not sure how to get it right.

How can I resolve this?

developer033

Since gallery_args is an object (as you showed in your question), not an array, so gallery_args[0] of course will be undefined.

Modify your transform function to:

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

Collected from the Internet

Please contact [email protected] to delete if infringement.