I have a collection of items in the specified structure:
{
img: './app/images/codeeval.png',
title: 'CodeEval',
repository: 'https://github.com/Shooshte/CodeEval',
description: 'Solutions to CodeEval challenges written in JavaScript and shared on GitHub.',
github: true,
demo: false,
completed: true
}
Currently, I am working on creating a custom filter that takes a string input, checks if the object has that particular property set as true, and then returns all objects meeting this condition. For instance, if I provide the string 'demo', it should display all objects where demo: true.
Here's my HTML code snippet:
<div *ngFor="#item of items | itemFilter: 'demo'" class="portfolioItemContainer">
<img [attr.src]="item.img" class="portfolioImage">
<h2>{{ item.title }}</h2>
<a [attr.href]="item.repository">
<div>
<p>{{ item.description }}</p>
</div>
<p class="portfolioLinkToRepo">View Code!</p>
</a>
</div>
This is how my component looks like:
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: [itemFilter],
encapsulation: ViewEncapsulation.None
})
export class PortfolioComponent {
items = [{
img: './app/images/placeholder.png',
title: 'veryNiceWords',
repository: 'https://github.com/Shooshte/veryNiceWords',
description: 'An app created for posting, rating, and sharing quotes over social networks. Still a work in progress.',
github: true,
demo: false,
completed: false
},
// Additional items omitted for brevity
];
}
@Pipe({ name: 'itemFilter' })
class itemFilter implements PipeTransform {
transform(items: Array, [key]): string {
return items.hasOwnProperty(key);
}
}
In the console, I'm encountering the following error message:
angular2.dev.js:23730 EXCEPTION: Error: Uncaught (in promise): Unexpected piped value 'undefined' on the View of component 'PortfolioComponent'
If anyone could assist me in identifying what I might be doing incorrectly, I would greatly appreciate it.
Thank you for your assistance