如何修复错误“错误：找不到管道'过滤器'！错误：找不到管道'过滤器'！“在角度 10？答案

【问题标题】：How can I fix the error "Error: The pipe 'filter' could not be found! Error: The pipe 'filter' could not be found! "In angular 10?如何修复错误“错误：找不到管道'过滤器'！错误：找不到管道'过滤器'！“在角度 10？
【发布时间】：2020-08-04 17:23:12
【问题描述】：

我有一个过滤器，在搜索名称时会为我带来包含该名称的数据，但它只会在浏览器控制台中向我发送该错误。它只是没有显示页面

html

<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4" style="padding-bottom: 15px;" >
<div class="card_book">
<div class="card">
 <div class="card-body text-center">
    <form>
    <fieldset>
          
    <div class="form-group">
      <input type="text" class="form-control" name="filterPost"  placeholder="Nombre"  [(ngModel)]="filterPost" >
      <br>   
    </div> 
  </fieldset>     </form>
  </div></div></div></div></div></div>
     
        
    
        <div class="container">
            <div class="row">
   <div class="col-xs-12 col-sm-6 col-md-4" style="padding-bottom: 15px;" *ngFor="let contacts of contacts | filtro:filterPost">
     <div class="card_book">
       <div class="card">
         <div class="card-body text-center">
                      
                      <h3 >Nombre: {{contacts.name}}</h3>
                      <h5>Edad: {{contacts.number}}</h5 >
                      <h5>Email: {{contacts.email}}</h5>
      <h5 class="card-text">Fecha de nacimiento: {{contacts.date}}</h5>
      <h6 style="color: red;">Id: {{contacts.id}}</h6>
      <button type="button" class="btn btn-primary" (click)="generarPDF()">
      <img src="assets/img/descargar.png"  alt="DESCARGAR PDF" title="Descargar pdf"> DESCARGAR PDF
             
                      </button>
                    
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
    </div>
      `````````

这里只有这个

  filterPost = '';

     `````````

管道真不知道是不是问题出在这里

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filtro'
})
export class FiltroPipe implements PipeTransform {

  transform(value: any, arg: any): any {
    if (arg === '' || arg.length < 3) return value;
    const resultPosts = [];
    for (const post of value) {
      if (post.email.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
        resultPosts.push(post);
      };
    };
    return resultPosts;
  }

}

它已经导入到模块中，但我不知道为什么会出现这个错误

import {FormsModule} from '@angular/forms';
import { FiltroPipe } from './pipes/filtro.pipe'




@NgModule({
  declarations: [
    FiltroPipe, 
  AppComponent,
  SendEmailComponent, 
  NavbarComponent,
  SidebarComponent,
  InactivityTimerComponent,
 
   ],
   
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireAuthModule, FormsModule
  ],
  providers: [AuthService, CanPaginaPrincipalGuard, AngularFirestore,DataDbService, 
   
  
  ],

 
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

你是如何将它导入到你的模块中的？
在 app.module.ts 我把import {FilterPipe} from './pipes/filtro.pipe'. 和声明“FilterPipe”中

标签： angular typescript pipe

【解决方案1】：

你必须在nearest module或app.module.ts中导入它

当您在 HTML 中使用管道时，请在 declarations 中插入管道（例如 | 'pipename'）

 @NgModule({
    // ---,
    declarations:[],
    // ----,

在.ts文件中使用管道时请在providers中插入管道（例如pipename.transform()）

 @NgModule({
    // ----,
    providers:[],
    // ----

【讨论】：

@DEXcarlos，它并不总是 app.module.ts 离您正在使用该管道的组件最近的模块是什么。
我修好了。在contact.module.ts

【解决方案2】：

您需要在component typescript 文件的提供者中注册 FiltroPipe。然后就可以了。

【讨论】：