Angular 角度2：管道'；SomePipe&x27；找不到

我使用自定义管道搜索表数据中的字符串，并得到错误消息“无法找到管道“FilterPipe””。我提到了下面的问题，但给出的解决方案对我不起作用

实际的.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;
    }
}

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{}

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 { }

主ipe.module.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;
    }
}

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{}

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 { }

应用程序模块.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;
    }
}

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{}

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>&nbsp;Edit</button>
               <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span>&nbsp;Delete</button>
               </td>
            </tr>
     </tbody>
   </table>

模板名称
创建于
最后修改
行动
{{template.Name}
{{template.Created_Date}
{{template.Modified_Date}
编辑
删除

---

我也试着提到其他类似的问题，但即使是那些问题也没有任何结果。我是Angular2的新手，请帮忙。谢谢你的阅读

您应该将管道导入到

声明中

而不是

导入下

试试这个

declarations: [
        AppComponent,
        AlertComponent,
        MainPipe,
        HomeComponent,
        LoginComponent,
        RegisterComponent,
        FileSelectDirective,
        UploadComponent,
        ReadComponent,
        DragComponent
    ],

---

您应该将管道导入到

声明中

而不是

导入下

试试这个

declarations: [
        AppComponent,
        AlertComponent,
        MainPipe,
        HomeComponent,
        LoginComponent,
        RegisterComponent,
        FileSelectDirective,
        UploadComponent,
        ReadComponent,
        DragComponent
    ],

---

主管是一个模块吗？是的，它是一个模块，我使用了我问题中链接中建议的解决方案。我做错什么了吗？我也试过。。但是没有运气：（在问题中添加了我的控制台窗口截图我找不到截图嘿，如果解决方案在聊天中解决了，它能反映在这里吗？主管是一个模块吗？是的，它是一个模块，我使用了我问题中链接中建议的解决方案。我做错了什么吗？也尝试了。但是没有运气：（将我的控制台窗口屏幕截图添加到问题我找不到屏幕截图嘿，如果解决方案是在聊天中解决的，它能反映在这里吗？您使用管道的组件是什么？该组件属于哪个模块？我在名为“home.component.html”的组件中使用它，它属于“app.module.ts”您使用管道的组件是什么？该组件属于哪个模块？我在名为“home.component.html”的组件中使用它，它属于“app.module.ts”