为什么这个Angular 2管道没有返回数据?
Why is this Angular 2 Pipe not returning data?
我正在使用Angular 2.0.0-RC.4构建一个Angular 2管道。它应该根据属性栏过滤所有作为Foo数组传入的Foo对象。当我在调试器中逐步执行代码时,'allFoo'变量被填充,'bar'变量也是如此。我可以在控制台中断点并运行foo .filter()代码,它返回我期望的数组。当我让函数结束时,它什么也不返回。
我的代码是否有问题,或者可能是Angular 2 RC4中的错误?
下面是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
}
}
}
}
作为参考,每个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}}
</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,如果这将有助于解决这个问题。
谢谢!
您的filter
函数不返回布尔值来包含数组元素。我猜应该是:return afoo.bars.indexOf(bar) !== -1;
就像现在一样,每个元素都被排除了。
相关文章:
- AJAX调用并在Node中获取返回数据
- 角度服务未返回数据
- 统计ajax返回数据中的html元素
- 有没有更好的方法可以测量从Ajax调用返回数据所需的总时间
- Imgur API图像搜索未返回数据
- javascript对象显示为null,但object.properties返回数据
- 如何从ajax调用JQuery返回数据
- 试图从嵌套的回调函数返回数据
- NodeJS FS 不从多个文件返回数据
- ajax函数未在C#中返回数据
- 如何在公共js模块中从web服务返回数据
- 将字符串与 JSON 对象组合以返回数据
- 嵌套异步函数未及时返回数据的问题
- NodeJS JSONStream 以一个长字符串的形式返回数据
- 如何使用 HTML 图像请求将数据发送到服务器,或返回数据作为响应
- 从 Angular 模态服务中的模态主体模板返回数据
- jQuery 每个循环返回数据两次
- $.getJSON 在返回数据后不会运行函数
- 如何访问返回数据中的特定json值
- 工厂返回数据后未设置角度$scope