eckig 2 Pipe - Filter nach JSON Schlüssel

Question

Ich versuche eine Pipe zu schreiben, die ein Array von JSON Objekten filtert. Jedes Objekt hat 3 Schlüssel, die boolesch sind - demo, github, finished und ich möchte diese in meinen Filter eingeben können, und nur die Objekte darstellen, bei denen der Schlüssel wahr ist. Ich muss nicht mehrere Werte eingeben, eine einzelne Zeichenfolge (Schlüssel) ist genug.

Bis jetzt, egal was ich in den Filter eingegeben habe, zeigt die Seite keine Daten. Wenn ich den Filter komplett entferne, bekomme ich alles im Service definiert. Es werden auch keine Fehlermeldungen protokolliert.

So habe ich einen Dienst, der die Seiten bietet:

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

Hier ist, wo ich den Dienst OnInit nennen und definieren das Rohr:

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

Dies ist, wie ich das Rohr verwenden in meinem 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

Sie könnten versuchen Sie stattdessen:

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

In Ihrem Fall versuchen Sie, auf die Eigenschaft mit dem Namen "Schlüssel" zuzugreifen, aber nicht mit dem Namen, der dem Inhalt des Schlüsselparameters entspricht.

Außerdem, wenn Sie den Wert „Demo“ verwenden möchten (nicht den Ausdruck „Demo“ zu bewerten), müssen Sie Folgendes verwenden:

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