Angular : Parser Error: Unexpected token -, expected identifier, keyword, or string

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

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

Answer 2

过滤器用法需要 field 和 value 参数。此外，您的管道名称中的破折号似乎引发了错误。尝试使用驼峰式 filterData:

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

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

Angular : Parser Error: Unexpected token -, expected identifier, keyword, or string

Angular : Parser Error: Unexpected token -, expected identifier, keyword, or string

angular

angular-pipe

代码