组件中的管道过滤器出现 angular2 错误答案

【问题标题】：angular2 error with pipe filter in component组件中的管道过滤器出现 angular2 错误
【发布时间】：2017-04-18 22:28:07
【问题描述】：

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

但是我收到了这种错误：

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 在同一个文件夹中

而且文件中有代码：

orders.component.html 中的 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

【问题讨论】：

你在使用 angular-cli 吗？最新版本？如果不是，请告诉我 angular2 版本
我正在使用来自github.com/angular/angular 的最新 angular2 版本，在我的仓库中找不到完全正确的版本号而且我从头开始创建我的项目。我有 angular-cli，但没有在那个项目中使用它。
看我的回答@Krzysztof

标签： angular filter pipe angular-pipe

【解决方案1】：

提示：当已有@Pipe()、@Component()或@Directive()时，无需添加@Injectable()

确保将FilterPipe 添加到当前模块的declarations: [FilterPipe]

或

添加了具有

的模块

declarations: [FilterPipe],
exports: [FilterPipe]

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

非常感谢！这解决了第一个错误的问题，但仍然有问题

【解决方案3】：

如果你使用 Angular 4，那么你不需要在 @Component 中指定管道。

【讨论】：