このAngular 2 Pipeがデータを返さないのはなぜですか？

Question

私はAngular 2.0.0-RC.4を使用してAngular 2パイプを構築しています。 プロパティーバーに基づいてFooの配列として渡されたすべてのFooオブジェクトをフィルタリングする必要があります。デバッガでコードをステップ実行すると、 'bar' varと同様に 'allFoo' varに値が設定されます。私はブレークポイントし、コンソールでfoos.filter（）コードを実行し、私が期待する配列を返します。関数を終了させると、何も返されません。

私のコードに問題がありますか、またはAngular 2 RC4にバグがありますか？ここで

が活字体である：

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 
      } 
     } 
    } 
} 

参考のためのバーのプロパティはその配列内の文字列を変えてしまうところ、それぞれのFooオブジェクトは、次のようになります。ここでは

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

は、テンプレートファイルでありますフィルタが適用される場所：

<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> 

ここでは、テンプレートとフィルタを使用していますS：

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"]; 
    } 
} 

ここでは、フー・テンプレートおよびクラスです：

<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; 

} 

私はconsole.log(results);行にブレークポイント場合、私は、コンソール上で次のように入力することができますし、それが適切な出力しますデータ：

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

これは、これを解決するのに役立つとすれば、私は蒸留されたJSを投稿できます。

ありがとうございます！

Answer 1

filter関数は、配列要素を含むためにブール値を返しません。私はそれがあるべきだと思う：return afoo.bars.indexOf(bar) !== -1;

今のところ、すべての要素が除外されています。