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

我试图在输入中添加简单的搜索过滤器，因此它可以过滤我在表中的记录。angular2错误与组件中的管道过滤器

但我收到这样那样的错误：

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

而且有代码的文件：在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); 
    } 
}

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] 
    })

它看起来并不像 “管道：[FilterPipe]” 但据我所知它是否设置正确。

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

zone.js:388 Unhandled Promise rejection: Template parse errors: The pipe 'ordersFilter' could not be found (" ]*ngFor="let order of orders | ordersFilter:term"> {{order.orderNum}} {{order.clien"): [email protected]:6 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: The pipe 'ordersFilter' could not be found (" ]*ngFor="let order of orders | ordersFilter:term"> {{order.orderNum}} {{order.clien"): [email protected]:6

来源

2016-12-04 Krzysztof Skorupski

你使用角度cli？最新版本？如果不是，请告诉我angular2版本 –

我使用的是https://github.com/angular/angular最新的angular2版本在我的回购中找不到完全正确的版本号而且我从零开始创建了我的项目。我有angular-cli，但没有用于该项目。 –

看到我的答案@Krzysztof –

如果存在这种情况，那么很可能您正在使用ngModule方法，如果这样做比您以不正确的方式导入管道，则必须在模块中导入管道而不是组件，即在您的用例中订购组件。

尝试导入您的烟斗heiger模块这样

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

PS： - 此外，您也可以创建你管的模块在多于一个的模块导入此。

来源

2016-12-04 13:08:38

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

欢迎:)高兴地知道:) –

提示：有没有必要添加@Injectable()时，已经是@Pipe()，@Component()，或@Directive()

确保您有FilterPipe加入您当前模块的declarations: [FilterPipe]

或

补充说，有

declarations: [FilterPipe], 
exports: [FilterPipe]

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

来源

2016-12-04 13:08:08

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

回答

相关问题