I'm trying to write a pipe that filters an array of JSON objects. Every object has 3 keys that are booleans - demo, github, finished and I want to be able to input these into my filter, and present only the objects where the key is true. I don't need to input multiple values, a single string (key) is enough.
So far, no matter what I input into the filter, the page shows no data. If I remove the filter completely I get everything defined in the service. There are also no error messages logged.
So I have a service that provides the pages:
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)
];
}
}
Here is where I call the service OnInit and define the pipe:
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();
}
}
This is how I use the pipe in my 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>
You could try this instead:
@Pipe({ name: 'pagesFilter' })
export class pagesFilter {
transform(pages, [key]) {
return pages.filter(page => {
return page[key] === true; // <------
});
}
}
In your case you try to access the property with name "key" but not with the name corresponding to the content of the key parameter.
Moreover if you want to use the value "demo" (not to evaluate the expression "demo"), you need to use the following:
<div *ngFor="#p of pages | pagesFilter:'demo'"
class="portfolioPageContainer">
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments