角度2管道 - 通過JSON鍵篩選

Question

我正在嘗試編寫一個管道，用於過濾JSON對象的數組。每個對象都有3個布爾鍵 - demo,github,，我希望能夠將這些鍵輸入到我的篩選器中，並僅顯示鍵爲true的對象。我不需要輸入多個值，單個字符串（鍵）就足夠了。

到目前爲止，無論我輸入到過濾器中，頁面都不會顯示數據。如果我完全刪除過濾器，我會得到服務中定義的所有內容。也沒有記錄錯誤消息。

所以我有一個提供網頁服務：

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

這裏就是我所說的服務的OnInit和定義管：

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">