组件中的管道过滤器的angular2错误 [英] angular2 error with pipe filter in component

问题描述

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

I'm trying to add simple search filter in input, so it could filter my records in 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 在同一个文件夹中

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

文件中有代码:

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]，但是据我所知它设置正确.

It looks like it doesn't like pipes: [FilterPipe] but, as far as I know it is set properly.

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

In web browser I'm receiving this error:

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

推荐答案

最有可能的是，如果您的应用程序使用ngModule方法，而不是以不正确的方式导入管道，则必须将管道导入到模块而不是组件，即在用例中订购组件.

Most probably, you are using ngModule approach for your app if so than you are importing your pipe in incorrect way, you have to import your pipe in the module instead of your component i.e. orders component in your use case.

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

Try importing your pipe in higher module like this:

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

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

P.S:- Moreover, you can also create your pipe as module to import this in more than one modules.

这篇关于组件中的管道过滤器的angular2错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！