Фильтрация JSON ключевыми трубами стоимости с использованием

Question

у меня есть массив объектов в следующем формате:

{ 
      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 
     } 

Теперь то, что я пытаюсь сделать, это написать пользовательскую трубу, которая принимает строку, а затем проверяет если объект имеет эту строку, установленную как true. Итак, допустим, я перехожу в 'demo', он вернет все объекты, имеющие demo: true.

мой 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> 

мой компонент:

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

Я получаю следующее сообщение об ошибке в консоли:

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

Может кто-нибудь, пожалуйста, указать на то, что я делаю неправильно?

Спасибо за помощь

Answer 1

Подъем не поддерживается для классов. Вы должны определить свою трубу до вашего класса:

@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 { 
    (...) 
} 

Update

Ваша труба должна возвращать массив не логическое значение:

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

    } 
}