petryuno1 petryuno1 - 2 months ago 20
TypeScript Question

Why is this Angular 2 Pipe not returning data?

I am building an Angular 2 pipe using Angular 2.0.0-RC.4.
It should filter all Foo objects passed in as an array of Foo based on property bar. When I step through the code in the debugger, the 'allFoo' var is populated, as is the 'bar' var. I can breakpoint and run the foos.filter() code in the console and it returns an array that I would expect. When I let the function finish, it returns nothing.

Is there a problem with my code or maybe a bug in Angular 2 RC4?

Here is the TypeScript:

import { Pipe, PipeTransform } from '@angular/core';
import { Foo } from '../foo';

@Pipe({
name: 'barFilterPipe'
})

export class BarFilterPipe implements PipeTransform {
transform(allFoo: Foo[], bar: string) {
console.log(allFoo); //data appears correctly here
console.debug(bar); //and correctly here
if (allFoo) {
if (bar == "" || bar == undefined) {
return allFoo; //if user clears filter
} else {
let results: Foo[] = allFoo.filter(afoo => {
afoo.bars.indexOf(bar) !== -1; //breakpoint here and type this into console, it returns proper data
});
console.log(results); //nothing is returned here
return results; // or here
}
}
}
}


For reference, each Foo object looks like this, where the bars property will have varying strings in its array:

{property1: -1, property2: "string", bars: ["A","B","C"]}


Here is the template file where the filter is applied:

<select [(ngModel)]="barFilter" class="form-control">
<option *ngFor="let bar of barList" [value]="bar">{{bar}}</option>
</select>
<table class="table">
<thead>
<tr>
<th>Property1 Name </th>
<th>Property2 Name</th>
<th>Bars</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of Foos | barFilterPipe : barFilter" [foofoo]="item"></tr>
</tbody>
</table>


Here is the Angular class that loads that template and uses the filter:

import {Component, OnInit} from '@angular/core';
import {Foo} from '../foo';
import { BarFilterPipe } from '../Pipes/BarFilterPipe';

@Component({
selector: 'my-component',
templateUrl: '../components/myComponent.html',
directives: [foofoo],
pipes: [BarFilterPipe]
})
export class MyComponent implements OnInit {
private barFilter: string;
private barList: string[];
private Foos: Foo[] = [{property1: -1, property2: "a", bars: ["A"]}, {property1: -1, property2: "z", bars: ["A","D"]}];
constructor(){}
ngOnInit(){
this.barList = ["","A","B","C","D","E"];
}
}


Here is the Foo template and class:

<td>
<h2>{{thisFoo.property1}}</h2>
</td>
<td>
{{thisFoo.property2}} &nbsp;
</td>
<td>
<label *ngFor="let bar of thisFoo.bars">{{bar}} &nbsp;</label>
</td>

import {Component, Input} from '@angular/core';
import {Foo} from './foo';

@Component({
selector: '[foofoo]',
templateUrl: '../components/foofooComponent.html',
})

export class EstabSummary {
@Input('foofoo') thisFoo;

}


If I breakpoint at the
console.log(results);
line, I can type the following on console and it outputs the appropriate data:

let results = allFoo.filter(afoo => {afoo.bars.indexOf(bar);})


I can post the transpiled JS if that will help solve this.

Thanks!

Answer

Your filter function doesn't return a boolean value to include array elements. I suspect it should be: return afoo.bars.indexOf(bar) !== -1;

As it is now, every element is excluded.

Comments