html - วิธีแก้ไขข้อผิดพลาด (pipe search ไม่พบหรือไม่ถูกพบ) ในการใช้งาน pipes สำหรับแถบค้นหาใน ionic 3

ในการพยายามของฉันที่จะใช้งานฟังก์ชัน pipe สำหรับการค้นหาและจัดเรียงเพื่อเตรียมฟีเจอร์การค้นหาในโปรเจกต์ 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

นำเข้ามอดูลนี้ในมอดูลใดก็ได้ที่คุณต้องการใช้ pipes

app.module.ts

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

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

คำตอบ #2

ปัญหาของคุณคือ Pipes ถูกส่งออกจากโมดูลหนึ่งไปยังอีกโมดูลหนึ่งไม่ได้ แม้ว่าจะนำเข้า moduleB ใน moduleA แล้วก็ตาม

จากที่ฉันเห็นคุณใช้ SearchPageModule และที่นี่เกิดข้อผิดพลาด คุณต้องประกาศ Pipes ของคุณภายในโมดูลนี้แทนการใส่ไว้ใน AppModule ของคุณ เพื่อให้มันทำงานได้

ป.ล.: เป็นแนวปฏิบัติที่ดีในการสร้าง PipesModule และประกาศ + ส่งออก pipe ที่ใช้ร่วมกันทั้งหมดที่นั่น จากนั้นคุณเพียงแค่ต้อง import โมดูลนี้ในโมดูลที่เกี่ยวข้องที่คุณต้องการใช้ pipe