angle 2パイプ - JSONキーによるフィルター

Question

JSONオブジェクトの配列をフィルタリングするパイプを作成しようとしています。すべてのオブジェクトには、ブール値の3つのキーがあります（demo、github、finished）。これをフィルタに入力し、キーが真であるオブジェクトのみを表示したいと考えています。私は複数の値を入力する必要はありません、単一の文字列（キー）で十分です。

これまでのところ、フィルタに何を入力しても、ページにはデータが表示されません。フィルタを完全に削除すると、サービスに定義されているすべてが取得されます。エラーメッセージも記録されていません。

だから私はページを提供するサービスを持っている：私は、サービスのOnInitを呼び出し、パイプを定義するのはここ

import { Injectable } from 'angular2/core'; 

export class Page { 
    constructor(public img: string, public name: string, public repo: string, public description: string, public demo: boolean, public github: boolean, public finished: boolean) { } 
} 

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

は次のとおりです。

import { Component } from 'angular2/core'; 
import { ViewEncapsulation } from 'angular2/core'; 
import { Page, PagesService } from './pages.service'; 
import { Pipe, PipeTransform } from 'angular2/core'; 

@Pipe({ name: 'pagesFilter' }) 
export class pagesFilter { 
    transform(pages, [key]) { 
     return pages.filter(page => { 
      return page.key === true; 
     }); 
    } 
} 

@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 { 
    filter = 'everything'; 
    pages: Page[]; 

    constructor(private _pagesService: PagesService) { } 

    ngOnInit() { 
     this.pages = this._pagesService.getPages(); 
    } 
} 

これは私が私の中にパイプを使用する方法でありますHTML：

<div class="portfolioContainer"> 
    <div class="displayHack"></div> 
    <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> 
    <div class="displayHack"></div> 
</div> 

Answer 1

あなたが代わりにこれを試みることができる：

を

@Pipe({ name: 'pagesFilter' }) 
export class pagesFilter { 
    transform(pages, [key]) { 
     return pages.filter(page => { 
      return page[key] === true; // <------ 
     }); 
    } 
} 

"key"という名前のプロパティにアクセスしようとしますが、keyパラメータの内容に対応する名前は使用しないでください。この作品

<div *ngFor="#p of pages | pagesFilter:'demo'" 
     class="portfolioPageContainer">