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

     2023-03-13     70

关键词:

【中文标题】如何解决在离子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 并在其中声明 + 导出所有共享管道。然后你只需要在你需要管道的相应模块中导入这个模块。

【讨论】:

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

如何解决在 Python 上安装 web3 时出现的这个错误

】如何解决在Python上安装web3时出现的这个错误【英文标题】:HowcanIfixthiserrorinstallingweb3onPython【发布时间】:2021-11-0208:31:03【问题描述】:ERROR:Commanderroredoutwithexitstatus1:command:\'C:\\ProgramFiles\\Python39\\python.exe\'-u-c\'importio,os,sys,se 查看详情

如何解决在 Heroku 上部署 React 应用程序时出现的错误

】如何解决在Heroku上部署React应用程序时出现的错误【英文标题】:HowtosolvetheErrorindeployingreactapponHeroku【发布时间】:2021-08-0103:11:55【问题描述】:我在本地为我的项目运行yarninstall和yarnstart,它运行良好。但是,一旦我将它推... 查看详情

如何修复在 Spyder 5.0.3 中执行 pip 时出现的错误

】如何修复在Spyder5.0.3中执行pip时出现的错误【英文标题】:HowdoIfixtheerrorIgetwhenexecutingpipinSpyder5.0.3【发布时间】:2021-08-1414:57:44【问题描述】:尝试通过Spyder5.0.3运行pip时出现错误我最近从https://www.spyder-ide.org/在我的机器上安装... 查看详情

警告:在两个 SDK 中实现的类

】警告:在两个SDK中实现的类【英文标题】:Warning:classimplementedinbothSDK【发布时间】:2011-07-2306:36:18【问题描述】:运行我的应用时出现以下错误:objc[59714]:类消息在/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator4.3... 查看详情

这是如何在 swift 4 中实现的?

】这是如何在swift4中实现的?【英文标题】:Howisthisimplementedinswift4?【发布时间】:2018-08-0413:25:33【问题描述】:我有这个link用于表格视图中的下拉搜索栏。我能够使用此代码在tableview中实现搜索栏searchController.searchResultsUpdater=s... 查看详情

如何解决经过nginx后不定时出现的http302错误

参考技术A醉了,302不是错误,大于400的才是错误。本回答被提问者和网友采纳 参考技术B302是临时重定向不是错误 参考技术C楼主解决了这个问题了吗我这边也出现了这个问题不过我是装了2个nginx之后的反向代理后出现的 查看详情

在我的应用程序中实现搜索时出现错误“索引 6 超出范围 [0 .. 5]”

...5-2314:47:57【问题描述】:这是我的代码。在遵循多个关于如何在Swift中实现搜索的教程时,我没有运气。importUIKitclassDataTableExerci 查看详情

如何解决在 jQuery 中使用 slideToggle 时出现的闪烁问题?

】如何解决在jQuery中使用slideToggle时出现的闪烁问题?【英文标题】:HowdoyoufixtheflickeringthatoccurswhenyouuseslideToggleinjQuery?【发布时间】:2010-09-1119:16:24【问题描述】:我有一个简单的无序列表,我想使用jQueryslideUp和slideDown效果在... 查看详情

推送时出现大标题导航栏和搜索栏的错误

】推送时出现大标题导航栏和搜索栏的错误【英文标题】:BugwithLargeTitleNavBarandSearchBarwhenpush【发布时间】:2019-03-2110:31:01【问题描述】:我在VC1上有带有搜索栏的大型导航栏。当我从VC1显示VC2时,我遇到了ui搜索栏问题(见截图... 查看详情

如何在 Heroku 上托管的 ruby​​ on rails 项目中实现弹性搜索?

】如何在Heroku上托管的ruby​​onrails项目中实现弹性搜索?【英文标题】:HowdoIimplementelasticsearchinarubyonrailsprojecthostedonheroku?【发布时间】:2011-08-2910:58:17【问题描述】:我的计划是在单独的linux服务器上运行弹性搜索作为Web服务... 查看详情

vs2008编译时出现的错误:无法打开编译器中间文件。如何解决?

fatalerrorC1083:无法打开编译器中间文件:“W:\userTemp\_CL_702e16efsy”:Nosuchfileordirectory要学会搜索,参考:http://support.microsoft.com/kb/114334/zh-cn编译VisualC++编译器的文件时,将出现下面的错误:C1083错误:无法打开编译器中间文件:&... 查看详情

java示例代码_解决对文档文件使用POI时出现的NoSuchMethod错误

java示例代码_解决对文档文件使用POI时出现的NoSuchMethod错误 查看详情

eclipse运行jsp文件时出现的,是啥错误,如何解决

HTTPStatus500-typeExceptionreportmessagedescriptionTheserverencounteredaninternalerror()thatpreventeditfromfulfillingthisrequest.exceptionorg.apache.jasper.JasperException org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:370) org.apache.jasper.servlet.JspServlet.serviceJspF... 查看详情

如何防止在Python中从firestore数据库中获取数据时出现的值错误

】如何防止在Python中从firestore数据库中获取数据时出现的值错误【英文标题】:HowtopreventfromthevalueerrorwhichisappearedwhilegettingdatafromfirestoredatabaseinPython【发布时间】:2021-11-1116:01:35【问题描述】:我正在为我的KivyMD项目使用firebasefi... 查看详情

如何解决在 Django Ajax 中输入数据时出现 HTTP 403 错误?

】如何解决在DjangoAjax中输入数据时出现HTTP403错误?【英文标题】:HowtosolveHTTP403erroroninputofdatainDjangoAjax?【发布时间】:2020-10-0404:55:32【问题描述】:我正在尝试实现搜索功能来搜索我博客的用户。在我的base.html中有我的导航栏... 查看详情

如何在 BizTalk 自定义管道中实现下拉列表

】如何在BizTalk自定义管道中实现下拉列表【英文标题】:HowtoimplementadropdownlistinBizTalkcustompipeline【发布时间】:2020-11-1116:40:38【问题描述】:我已搜索如何在属性窗口的BizTalk管理控制台部分中显示的BizTalk自定义管道中实现选择... 查看详情

如何在 TypeScript 中实现的接口中进行构造函数重载?

】如何在TypeScript中实现的接口中进行构造函数重载?【英文标题】:HowcanIdoconstructoroverloadinginaimplementedinterfaceinTypeScript?【发布时间】:2016-08-0203:24:09【问题描述】:我试图重载实现接口的类的构造函数,但出现以下错误:[0]app/... 查看详情

如何修复在 Django Rest Framework 中使用 REST API 登录时出现的 CSRF 错误?

】如何修复在DjangoRestFramework中使用RESTAPI登录时出现的CSRF错误?【英文标题】:HowtofixCSRFerroronlogginginusingRESTAPIinDjangoRestFramework?【发布时间】:2021-01-1201:53:50【问题描述】:我是Django初学者,按照this教程使用DRF实现注册、登录和... 查看详情