angular 2 Pipe - 按 JSON 键过滤

Question

我正在尝试编写一个过滤 JSON 对象数组的管道。每个对象都有 3 个布尔键 - demo、github、finished，我希望能够将这些输入到我的过滤器中，并且只显示键为真的对象。我不需要输入多个值，一个字符串（key）就足够了。

到目前为止，无论我在过滤器中输入什么，页面都没有显示任何数据。如果我完全删除过滤器，我会得到服务中定义的所有内容。也没有记录错误消息。

所以我有一个提供页面的服务：

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 参数内容对应的名称访问属性。

此外，如果您想使用值“demo”（而不是评估表达式“demo”），则需要使用以下内容：

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