我在我的项目中使用@angular~4.0.0，我以表格形式显示数据并想添加搜索控件。
此代码有效（无过滤器）
<tr *ngFor="let item of components">
但是当我为过滤器添加下面的代码时，它会抛出错误
<tr *ngFor="let item of components | filter-data:compName">
错误 ：
Unhandled Promise rejection: Template parse errors:
TypeError: Unable to get property 'toUpperCase' of undefined or null reference ("
</tr>
</thead>
<tr [ERROR ->]*ngFor="let item of components | filter-data:compName">
<!--<tr *ngFor="let item of componen"): ng:///App/PortalComponents/ComponentList/component-list.component.html@14:12
Parser Error: Unexpected token -, expected identifier, keyword, or string at column 32 in [let item of components | filter-data:compName] in ng:///App/PortalComponents/ComponentList/component-list.component.html@14:12 ("nts | filter-data:compName">
<!--<tr *ngFor="let item of components">-->
<td> [ERROR ->]<a routerLink="/components"> {{item.Component_ID}} </a></td>
<td>{{item.Component_Name}}"): ng:///App/PortalComponents/ComponentList/component-list.component.html@16:17, Directive RouterLinkWithHref
Parser Error: Unexpected token -, expected identifier, keyword, or string at column 32 in [let item of comp
"Unhandled Promise rejection:"
代码
组件列表.components.html
<input #compName placeholder="first name" />
<table id="myTable" class="display table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Component Name</th>
<th>Department</th>
<th>Region</th>
<th>Sector</th>
</tr>
</thead>
<tr *ngFor="let item of components | filter-data:compName">
<!--<tr *ngFor="let item of components">-->
<td> <a routerLink="/components"> {{item.Component_ID}} </a></td>
<td>{{item.Component_Name}}</td>
<td>{{item.Sector}}</td>
<td>{{item.Region}}</td>
<td>{{item.Updated_By}}</td>
</tr>
</table>
过滤器数据.pipe.ts
import { Injectable, Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter-data'
})
@Injectable()
export class FilterPipe implements PipeTransform {
transform(items: any[], field : string, value : string): any[] {
if (!items) return [];
return items.filter(it => it[field] == value);
}
}
组件列表.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Pipe } from '@angular/core';
// Observable class extensions
import 'rxjs/add/observable/of';
// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
// Component & Service
import { ComponentsModel } from '../../Model/Component/components.model'
import { ComponentsService } from '../../Services/Components/components.service'
@Component({
moduleId : module.id,
selector : 'component-list',
templateUrl : 'component-list.component.html',
providers: [ComponentsService]
})
export class ComponentListComponent{
constructor(
private componentservice: ComponentsService,
private router: Router
){}
//Local Properties
components: ComponentsModel[];
loadComponents(){
// Get all comments
this.componentservice.GetComponents()
.subscribe(
components => this.components = components, //Bind to view
err => {
// Log errors if any
console.log(err);
});
}
ngOnInit(){
// Load comments
this.loadComponents()
}
}
感谢你的帮助。