2
我正在嘗試編寫一個管道,用於過濾JSON
對象的數組。每個對象都有3個布爾鍵 - demo
,github
,,我希望能夠將這些鍵輸入到我的篩選器中,並僅顯示鍵爲true的對象。我不需要輸入多個值,單個字符串(鍵)就足夠了。角度2管道 - 通過JSON鍵篩選
到目前爲止,無論我輸入到過濾器中,頁面都不會顯示數據。如果我完全刪除過濾器,我會得到服務中定義的所有內容。也沒有記錄錯誤消息。
所以我有一個提供網頁服務:
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>
這個工程。我還需要將我的html中的字符串作爲引號傳入。謝謝您的幫助 –