我有自定义管道,用于搜索表格数据中的字符串,我收到错误消息“无法找到管道'FilterPipe'”。我提到了下面的问题,但那里给出的解决方案对我没用。
The pipe ' ' could not be found angular2 custom pipe
Actual.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(value: any, input: string) {
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
return el.Name.toLowerCase().indexOf(input) > -1;
})
}
return value;
}
}
主要-ipe.module.ts
import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";
import {FilterPipe} from "./Actual.pipe";
@NgModule({
declarations:[FilterPipe],
imports:[CommonModule],
exports:[FilterPipe]
})
export class MainPipe{}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { Ng2DragDropModule } from 'ng2-drag-drop';
import {DndModule} from 'ng2-dnd';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { AppConfig } from './app.config';
import {MainPipe} from './main-pipe.module';
import { AlertComponent } from './_directives/index';
import { AuthGuard } from './_guards/index';
import { AlertService, AuthenticationService, UserService, SchemaService, TemplateService } from './_services/index';
import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { UploadComponent } from './upload/index';
import { ReadComponent } from './read/index';
import { DragComponent } from './drag/index';
@NgModule({
imports: [
BrowserModule,
DndModule.forRoot(),
FormsModule,
HttpModule,
routing,
Ng2DragDropModule,
MainPipe
],
declarations: [
AppComponent,
AlertComponent,
HomeComponent,
LoginComponent,
RegisterComponent,
FileSelectDirective,
UploadComponent,
ReadComponent,
DragComponent
],
providers: [
AppConfig,
AuthGuard,
AlertService,
AuthenticationService,
UserService,
SchemaService,
TemplateService
],
bootstrap: [AppComponent]
})
export class AppModule { }
我使用管道的HTML代码:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Template Name</th>
<th>Created On</th>
<th>Last Modified</th>
<th>Actions</th>
</tr>
</thead>
<tbody *ngFor="let template of templates | FilterPipe: queryString">
<tr>
<td>{{template.Name}}</td>
<td>{{template.Created_Date}}</td>
<td>{{template.Modified_Date}}</td>
<td>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span> Delete</button>
</td>
</tr>
</tbody>
</table>
我也试过提到其他类似的问题,但即便是那些也没有提出任何结果。我是Angular2的新手,请帮忙。谢谢你的阅读!
答案 0 :(得分:1)
您应该将管道导入 declarations
,而不是 imports
,
试试这个,
declarations: [
AppComponent,
AlertComponent,
MainPipe,
HomeComponent,
LoginComponent,
RegisterComponent,
FileSelectDirective,
UploadComponent,
ReadComponent,
DragComponent
],