2

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

但我收到这种错误：

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>

过滤器.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);
        }
  }

订单.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
4

3 回答 3

2

提示：@Injectable()已有@Pipe(), @Component(), 或@Directive()

确保您已FilterPipe添加到declarations: [FilterPipe]当前模块

或者

添加了具有

declarations: [FilterPipe],
exports: [FilterPipe]

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

于 2016-12-04T13:08:08.827 回答
2

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

尝试在更高的模块中导入管道，如下所示：

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

PS：-此外，您还可以将管道创建为模块以将其导入多个模块。

于 2016-12-04T13:08:38.170 回答
0

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

于 2018-08-01T05:08:27.420 回答