我正在使用 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 对象看起来像这样,其中 bar 属性在其数组中将具有不同的字符串:
{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}}
</td>
<td>
<label *ngFor="let bar of thisFoo.bars">{{bar}} </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。
谢谢!