如何解决在 Ionic 3 中实现搜索栏管道时的错误(管道搜索找不到或找不到)

Question

在我尝试实现搜索和排序管道函数以在我的 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>

页面中的代码.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
  ],

我将包括管道.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
    });
  }
}

第二：排序代码

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;
      }
    });
  }
}

**请在您对重复的问题

做出判断之前，我希望您首先完整阅读问题并给我一个明显的答案或此错误的解决方案，我知道有一个问题可能会比作它，但实际上我没有解决我的问题**

感谢大家

Answer 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,
  ],
}

Answer 2

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

如我所见，您使用了搜索页面模块，此处发生了错误。您必须在此模块中声明管道，而不是将它们放入 AppModule 中，才能让它们工作。

PS：最好创建一个管道模块并在那里声明+导出所有共享管道。然后，您只需将此模块导入到需要管道的相应模块中。