html - cách giải quyết lỗi (pipe search không tìm thấy hoặc không có) khi triển khai các pipe cho thanh tìm kiếm trong ionic 3

Trong những nỗ lực của tôi để thực hiện các chức năng search và sort pipe nhằm chuẩn bị tính năng tìm kiếm trong các dự án Ionic 3 của tôi để tìm kiếm dữ liệu đến từ cơ sở dữ liệu, tôi nhận được một lỗi mà tôi không biết tại sao .. lỗi như sau:

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>

mã trong page.html là:

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

mã trong page.ts là:

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

}

và trong app.module.ts đó :

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

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

và tôi sẽ bao gồm mã pipes.ts :

đầu tiên : searc.ts ống :

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

thứ hai: mã 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;
      }
    });
  }
}

** xin vui lòng, trước khi bạn đánh giá về câu hỏi này là trùng lặp, tôi hy vọng bạn sẽ đọc toàn bộ câu hỏi trước và đưa cho tôi một câu trả lời rõ ràng hoặc một giải pháp cho lỗi này, tôi biết có một câu hỏi có thể giống nó nhưng thực sự tôi không có giải pháp cho vấn đề của mình**

Cảm ơn tất cả mọi người

Câu trả lời #1

Khi bạn muốn sử dụng bất kỳ thành phần/pipe nào trong các module khác ngoài module mà chúng được khai báo, bạn nên xuất chúng ra.

Bây giờ, trong trường hợp của bạn, bạn không muốn chỉ xuất chúng từ AppModule, vì không phải là một ý tưởng hay khi xuất từ AppModule

Tạo một module có tên PipesModule thay vào đó

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

Nhập module này vào bất kỳ module nào mà bạn muốn sử dụng các pipe trong đó,

app.module.ts

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

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

Câu trả lời #2

Vấn đề của bạn là các Pipe không được xuất từ một module sang module khác, ngay cả khi moduleB được nhập vào moduleA.

Như tôi có thể thấy bạn sử dụng một SearchPageModule và lỗi đã xảy ra ở đây. Bạn phải khai báo các Pipes của mình bên trong module này thay vì đưa chúng vào AppModule của bạn, để chúng có thể hoạt động.

PS: Thực hành tốt là tạo một PipesModule và khai báo + xuất tất cả các pipe dùng chung của bạn ở đó. Sau đó, bạn chỉ cần nhập Module này vào module tương ứng nơi bạn cần các pipe.