如何解决在离子3中实现搜索栏的管道时出现的错误（管道搜索找不到或未找到）

Posted 2023-03-13

【中文标题】如何解决在离子3中实现搜索栏的管道时出现的错误（管道搜索找不到或未找到）

【英文标题】：how to solve the error(pipe search couldn't found or not found) in implementing the pipes for a search bar in ionic 3

【发布时间】：2018-09-02 23:09:43

【问题描述】：

在我尝试实现搜索和排序管道功能以在我的 ionic 3 项目中准备搜索功能以搜索来自数据库的数据时， 我收到一个错误，我不知道为什么.. 像这样的错误：

core.js:1350 ERROR Error: Uncaught (in promise): Error: Template parses errors:
The pipe 'sort' could not be found ("
    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="l[ERROR ->]et f of users | search : terms | sort: property: column, order: order">
          <ion-thumbnail it"): ng:///SearchPageModule/SearchPage.html@32:27
The pipe 'search' could not be found ("
    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="l[ERROR ->]et f of users | search : terms | sort: property: column, order: order">
          <ion-thumbnail it"): ng:///SearchPageModule/SearchPage.html@32:27
The pipe 'sort' could not be found ("

      <ion-list *ngSwitchCase="'places'">
        <ion-item *ngFor="l[ERROR ->]et p of places | search : terms | sort: property: column, order: order">
          <ion-thumbnail i"): ng:///SearchPageModule/SearchPage.html@62:27
The pipe 'search' could not be found ("

      <ion-list *ngSwitchCase="'places'">
        <ion-item *ngFor="l[ERROR ->]et p of places | search : terms | sort: property: column, order: order">
          <ion-thumbnail i"): ng:///SearchPageModule/SearchPage.html@62:27
Error: Template parse errors:
The pipe 'sort' could not be found ("
    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="l[ERROR ->]et f of users | search : terms | sort: property: column, order: order">
          <ion-thumbnail it"): ng:///SearchPageModule/SearchPage.html@32:27
The pipe 'search' could not be found ("
    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="l[ERROR ->]et f of users | search : terms | sort: property: column, order: order">
          <ion-thumbnail it"): ng:///SearchPageModule/SearchPage.html@32:27
The pipe 'sort' could not be found ("

      <ion-list *ngSwitchCase="'places'">
        <ion-item *ngFor="l[ERROR ->]et p of places | search : terms | sort: property: column, order: order">
          <ion-thumbnail i"): ng:///SearchPageModule/SearchPage.html@62:27
The pipe 'search' could not be found ("

      <ion-list *ngSwitchCase="'places'">
        <ion-item *ngFor="l[ERROR ->]et p of places | search : terms | sort: property: column, order: order">
          <ion-thumbnail i"): ng:///SearchPageModule/SearchPage.html@62:27
    at syntaxError (compiler.js:466)
    at TemplateParser.parse (compiler.js:24329)
    at JitCompiler._parseTemplate (compiler.js:33757)
    at JitCompiler._compileTemplate (compiler.js:33732)
    at compiler.js:33634
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:33634)
    at compiler.js:33504
    at Object.then (compiler.js:455)
    at JitCompiler._compileModuleAndComponents (compiler.js:33503)
    at syntaxError (compiler.js:466)
    at TemplateParser.parse (compiler.js:24329)
    at JitCompiler._parseTemplate (compiler.js:33757)
    at JitCompiler._compileTemplate (compiler.js:33732)
    at compiler.js:33634
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:33634)
    at compiler.js:33504
    at Object.then (compiler.js:455)
    at JitCompiler._compileModuleAndComponents (compiler.js:33503)
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4620)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>

page.html中的代码是：

<ion-searchbar [(ngModel)]="terms"></ion-searchbar>
  <button ion-button type="button" (click)="sort()">Sort</button>

    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="let f of users | search : terms | sort: property: column, order: order">
          <ion-thumbnail item-start>
            <img [src]="f.image"/>
          </ion-thumbnail>
          <h2>f.name</h2>
        </ion-item>
       </ion-list>

page.ts中的代码是：

import  Component  from '@angular/core';
import  IonicPage, NavController, NavParams  from 'ionic-angular';
import  HttpClient  from '@angular/common/http';
import  SearchPipe  from '../../pipes/search/search';
import  SortPipe  from '../../pipes/sort/sort';

@IonicPage()
@Component(
  selector: 'page-search',
  templateUrl: 'search.html',
)
export class SearchPage 


  descending: boolean = false;
  order: number;
  column: string = 'name';
  users : any ;
  places : any ; 

  constructor(public navCtrl: NavController, public navParams: NavParams , public http: HttpClient) 
    //this.initializeItems();
  

  ngOnInit()

    this.http.get("http://localhost/Test1/getCity.php?action=getFriends")
    .subscribe( data =>
     this.users = data['friends']
      console.log(this.users)
    );

    this.http.get("http://localhost/Test1/getCity.php?action=getDetail")
    .subscribe( data =>
     this.places = data['detail']
      console.log(this.places)
    );



  

  sort()
    this.descending = !this.descending;
    this.order = this.descending ? 1 : -1;
  

在 app.module.ts 中有：

import  SearchPipe  from '../pipes/search/search';
import  SortPipe  from '../pipes/sort/sort';

@NgModule(
  declarations: [
    MyApp,
    TulkarmPage,
    CatDetailsPage,
    ModalsPage,
    DetailsPage,
    SearchPipe,
    SortPipe
  ],

我将包含 pipes.ts 编码：

第一：searc.ts管道：

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


@Pipe(
  name: 'search',
)
export class SearchPipe implements PipeTransform 

  transform(items: any[], terms: string): any[] 
    if(!items) return [];
    if(!terms) return items;
    terms = terms.toLowerCase();
    return items.filter( it => 
      return it.name.toLowerCase().includes(terms); // only filter country name
    );
  

第二个：sort.ts 代码

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


@Pipe(
  name: 'sort',
)
export class SortPipe implements PipeTransform 

  transform(array: Array<string>, args?: any): Array<string> 
    return array.sort(function(a, b)
      if(a[args.property] < b[args.property])
          return -1 * args.order;
      
      else if( a[args.property] > b[args.property])
          return 1 * args.order;
      
      else
          return 0;
      
    );
  

** 请在您判断其重复的问题之前，我希望您先完整阅读该问题并给我一个明显的答案或解决此错误的方法，我知道有一个问题可能会比较它，但真的我的问题没有解决方案**

谢谢大家

【参考方案1】：

如果您想在声明它们的模块之外的任何其他模块中使用任何组件/管道，您应该将它们导出。

现在，在您的情况下，您不想只从 AppModule 导出它们，因为从 AppModule 导出不是一个好主意

改为创建一个名为 PipesModule 的模块

import  SearchPipe  from '../pipes/search/search';
import  SortPipe  from '../pipes/sort/sort';
import  CommonModule  from '@angular/common';

@NgModule(
    imports: [CommonModule],
    declarations: [SearchPipe, SortPipe],
    exports: [SearchPipe, SortPipe]
)
export class PipesModule

将此模块导入您要在其中使用管道的任何模块中，

app.module.ts

import  PipesModule  from '../pipes/pipes.module';

@NgModule(
  imports: [.., PipesModule],
  declarations: [
    MyApp,
    TulkarmPage,
    CatDetailsPage,
    ModalsPage,
    DetailsPage,
  ],

【讨论】：

是的，这样也很好......非常感谢你，兄弟，这是一个很好的公共解决方案

【参考方案2】：

您的问题是，即使在 moduleA 中导入了 moduleB，管道也不会从一个模块导出到另一个模块。

正如我所见，您使用了 SearchPageModule 并且这里发生了错误。你必须在这个模块中声明你的管道，而不是把它们放到你的 AppModule 中，才能让它们工作。

PS：最好创建一个 PipesModule 并在其中声明 + 导出所有共享管道。然后你只需要在你需要管道的相应模块中导入这个模块。

【讨论】：

谢谢兄弟，这对我有用.. 非常感谢:)