Question

我在我的项目中使用@ 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:"

的代码

组件list.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>

filterdata.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);
    }
}

组件list.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()
    }
}

感谢您的帮助。

Answer 1

过滤器使用情况需要field和value个参数。此外，管道名称中的破折号似乎触发了错误。尝试使用camelCase filterData：

<tr *ngFor="let item of components | filterData:'theField':'theValue'">

我建议您将管道重命名为filter并避免使用标识符中的破折号。

Answer 2

Angular不再有FilterPipe：https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

Angular：分析器错误：意外的令牌 - ，预期的标识符，关键字或字符串

的代码

2 个答案: