为什么这个 Angular 2 Pipe 不返回数据？答案

【问题标题】：Why is this Angular 2 Pipe not returning data?为什么这个 Angular 2 Pipe 不返回数据？
【发布时间】：2017-01-19 08:58:07
【问题描述】：

我正在使用 Angular 2.0.0-RC.4 构建一个 Angular 2 管道。它应该根据属性栏过滤作为 Foo 数组传入的所有 Foo 对象。当我在调试器中单步执行代码时，会填充“allFoo”变量，“bar”变量也是如此。我可以断点并在控制台中运行 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 对象看起来像这样，bars 属性的数组中会有不同的字符串：

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

这是加载该模板并使用过滤器的 Angular 类：

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

这是 Foo 模板和类：

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

谢谢！

【问题讨论】：

if (method == "" || method == undefined) method 设置在哪里？
糟糕。从我的实际 var 名称复制时，我错过了这一点。现已修复。
展示你如何在模板中使用管道
没问题。我添加了该代码等等。
顺便说一句，清除过滤器（将其设置为“”）按预期工作。

标签： javascript angular typescript angular2-pipe

【解决方案1】：

您的filter 函数不返回布尔值来包含数组元素。我怀疑应该是：return afoo.bars.indexOf(bar) !== -1;

就像现在一样，每个元素都被排除在外。

【讨论】：

就是这样！谢谢！