组件中管道过滤器的angular2错误

Question

我正在尝试在输入中添加简单的搜索过滤器，以便它可以过滤我在 table 中的记录。

但是我收到了这样的错误：

app/components/orders/orders.component.ts(12,2): error TS2345:
 Argument of type '{ moduleId: string; selector: string; templateUrl:
 string; pipes: typeof FilterPipe[]; }' is not assignable to parameter
 of type 'Component'.   Object literal may only specify known
 properties, and 'pipes' does not exist in type 'Component'.

所有文件：

orders.component.html, orders.component.ts, filter.pipe.ts are in the same folder

文件中有代码：

HTML 在 orders.component.html

<input class="prompt" type="text" placeholder="Szukaj zlecenia..." [(ngModel)]="term">

<tr *ngFor="let order of orders">
    <td>{{order.orderNum}}</td>
    <td>{{order.clientNum}}</td>
    <td>{{order.dateCreated}}</td>
    <td>{{order.account}}</td>
    <td>{{order.status}}</td>
</tr>

filter.pipe.ts

 import { Injectable, Pipe, PipeTransform } from '@angular/core';

    @Pipe({
        name: 'ordersFilter',
        pure: false
    })
    @Injectable()
    export class FilterPipe implements PipeTransform {
        transform(items: any[], args: any[]): any {
            return items.filter(item => item.title.indexOf(args[0].title) !== -1);
        }
  }

orders.component.ts

import { Component } from '@angular/core';
    import { OrderService } from '../../services/order.service'
    import { Order } from '../../structure/Order';
    import { Injectable, Pipe, PipeTransform } from '@angular/core';
    import { FilterPipe } from './filter.pipe';

    @Component({
        moduleId: module.id,
        selector: 'orders',
        templateUrl: 'orders.component.html',
        pipes: [FilterPipe]
    })

看起来不喜欢pipes: [FilterPipe]，但据我所知它设置正确。

在网络浏览器中我收到此错误：

zone.js:388 Unhandled Promise rejection: Template parse errors: The
 pipe 'ordersFilter' could not be found ("      </thead>        <tbody>         <tr
 [ERROR ->]*ngFor="let order of orders | ordersFilter:term">
            <td>{{order.orderNum}}</td>             <td>{{order.clien"):
 OrdersComponent@28:6 ; Zone: <root> ; Task: Promise.then ; Value:
 Error: Template parse errors:(…) Error: Template parse errors: The
 pipe 'ordersFilter' could not be found ("      </thead>        <tbody>         <tr
 [ERROR ->]*ngFor="let order of orders | ordersFilter:term">
            <td>{{order.orderNum}}</td>             <td>{{order.clien"):
 OrdersComponent@28:6

Answer 1

提示：已有@Pipe()、@Component()、@Directive()

时，无需添加@Injectable()

确保您已将 FilterPipe 添加到当前模块

的 declarations: [FilterPipe]

或

添加了具有

的模块

declarations: [FilterPipe],
exports: [FilterPipe]

到您当前模块的 imports: [...]。

Answer 2

最有可能的是，您正在为您的应用程序使用 ngModule 方法，如果您以不正确的方式导入您的管道，您必须在模块而不是您的组件中导入您的管道，即在您的命令中导入组件用例。

尝试像这样在更高模块中导入管道：

@NgModule({
  declarations: [FilterPipe,.... ],
  imports: [.... ],
  providers: [....],
  bootstrap: [AppComponent]
})
export class AppModule { }

P.S:- 此外，您还可以将管道创建为模块以将其导入多个模块。

Answer 3

如果您使用的是angular 4，则无需在@Component 中指定管道。

组件中管道过滤器的angular2错误

angular2 error with pipe filter in component

angular

filter

pipe

angular-pipe