Question

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

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

Answer 1

您需要在component typescript文件的提供者中注册FiltroPipe。然后它将起作用。

Answer 2

您必须将其导入nearest module或app.module.ts

在HTML中使用管道（例如|“管道名称”）时，请将管道插入declarations

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

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

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

如何解决错误“错误：找不到管道'过滤器'！错误：找不到管道'过滤器！”在角度10？

2 个答案: