使用管道按键值过滤 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'，它将 return 所有具有 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

classes 不支持提升。您需要在 class:

之前定义管道

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

更新

你的管道应该return一个数组而不是布尔值：

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

  }
}

使用管道按键值过滤 JSON

Filtering JSON by key value using pipes

json

typescript

angular

pipes-filters