Filtering JSON von Schlüssel-Wert unter Verwendung von Rohren

Question

ich ein Array von Objekten in folgendem Format haben:

{ 
      img: './app/images/codeeval.png', 
      name: 'codeEval', 
      repo: 'https://github.com/Shooshte/CodeEval', 
      description: 'CodeEval challenges solutions written in javascript and posted to gitHub.', 
      github: true, 
      demo: false, 
      finished: true 
     } 

Nun, was ich versuche zu tun, ist ein eigenes Rohr zu schreiben, die einen String, und dann überprüft wenn das Objekt diese Zeichenfolge als wahr definiert hat. Lassen Sie uns also sagen, ich gebe 'demo', es würde alle Objekte zurückgeben, die demo: true haben.

mein html:

<div *ngFor="#p of pages | pagesFilter: 'demo'" class="portfolioPageContainer"> 
    <img [attr.src]="p.img" class="portfolioThumbnail"> 
    <h2>{{ p.name }}</h2> 
    <a [attr.href]="p.repo"> 
     <div> 
      <p>{{ p.description }}</p> 
     </div> 
     <p class="portfolioRepoLink">See the Code!</p> 
    </a> 
</div> 

meine Komponente:

import { Component } from 'angular2/core'; 
import {ViewEncapsulation} from 'angular2/core'; 
import {Pipe, PipeTransform} from 'angular2/core'; 

@Component({ 
    selector: 'portfolio', 
    templateUrl: '/app/views/portfolio.html', 
    styleUrls: ['../app/styles/PortfolioMobile.css', '../app/styles/PortfolioOther.css'], 
    pipes: [pagesFilter], 
    encapsulation: ViewEncapsulation.None 
}) 

export class PortfolioComponent { 
    pages = [{ 
     img: './app/images/placeholder.png', 
     name: 'veryNiceWords', 
     repo: 'https://github.com/Shooshte/veryNiceWords', 
     description: 'A hobby app, made to enable posting, rating and sharing quotes over social networks. Work in progress.', 
     github: true, 
     demo: false, 
     finished: false 
    }, 
     { 
      img: './app/images/placeholder.png', 
      name: 'ZIC IJS', 
      repo: 'https://github.com/Shooshte/ZIC', 
      description: 'Refurbishing of on old library webpage with AngularJS.', 
      github: true, 
      demo: false, 
      finished: false 
     }, 
     { 
      img: './app/images/weather.png', 
      name: 'Show the Local weather', 
      repo: 'http://codepen.io/shooshte/pen/NxOwOX', 
      description: 'A freeCodeCamp exercise, designed to show the local weather.', 
      github: false, 
      demo: true, 
      finished: true 
     }, 
     { 
      img: './app/images/calculator.png', 
      name: 'Calculator', 
      repo: 'http://codepen.io/shooshte/pen/qbjJdy', 
      description: 'A freeCodeCamp exercise, which requires you to build a javascript calculator.', 
      github: false, 
      demo: true, 
      finished: true 
     }, 
     { 
      img: './app/images/github.png', 
      name: 'MTGO Draft Replayer', 
      repo: 'https://github.com/Shooshte/MTGO-Draft-Replayer', 
      description: 'A simple web app that opens a MTGO draft log file, and re-creates the draft from it.', 
      github: true, 
      demo: false, 
      finished: false 
     }, 
     { 
      img: './app/images/codeeval.png', 
      name: 'codeEval', 
      repo: 'https://github.com/Shooshte/CodeEval', 
      description: 'CodeEval challenges solutions written in javascript and posted to gitHub.', 
      github: true, 
      demo: false, 
      finished: true 
     }]; 
} 

@Pipe({ name: 'pagesFilter' }) 
class pagesFilter implements PipeTransform { 
    transform(pages: Array, [key]): string { 
     return pages.hasOwnProperty(key); 
    } 
} 

ich folgende Fehlermeldung in der Konsole:

angular2.dev.js:23730 EXCEPTION: Error: Uncaught (in promise): Unexpected piped value 'undefined' on the View of component 'PortfolioComponent'

Kann das, was jemand bitte darauf hinweisen, ich tue falsch?

Danke für die Hilfe

Answer 1

Hissen ist nicht für die Klassen unterstützt. Sie benötigen Rohr vor Ihrer Klasse zu definieren:

@Pipe({ name: 'pagesFilter' }) 
class pagesFilter implements PipeTransform { 
    transform(pages: Array, [key]): string { 
    return pages.hasOwnProperty(key); 
    } 
} 

@Component({ 
    selector: 'portfolio', 
    templateUrl: '/app/views/portfolio.html', 
    styleUrls: ['../app/styles/PortfolioMobile.css', '../app/styles/PortfolioOther.css'], 
    pipes: [pagesFilter], 
    encapsulation: ViewEncapsulation.None 
}) 
export class PortfolioComponent { 
    (...) 
} 

aktualisieren

Ihr Rohr sollte ein Array zurück kein boolean:

@Pipe({ name: 'pagesFilter' }) 
class pagesFilter implements PipeTransform { 
    transform(pages: Array, [key]): string { 
    return pages.filter(page => { 
     return page.hasOwnProperty(key); 
    }); 

    } 
}