过滤管在angular2中不起作用

Posted 2023-03-13

【中文标题】过滤管在angular2中不起作用

【英文标题】：Filter pipe is not working in angular2

【发布时间】：2017-05-27 04:00:14

【问题描述】：

我在项目中添加了过滤器管道，但页面未加载。我找不到问题。请在这个问题上帮助我。这些是我的 html 代码和组件文件

<ul class="order_list_page">
  <li *ngFor="let orderlist of orders | searchPipe: input.value">
    <div class="order-heading">
      <p class="pull-left"><span class="MR15"><b>Order Id :</b> orderlist.id </span>  <span  class="MR15"><b>Order placed :</b> orderlist.date</span></p>  
      <a class="pull-right" routerLink="/order_detail">View details</a>     
      <div class="clearfix"></div>
    </div>
    <div class="panel">
      <div class="panel-body">
        <div class="pull-left">
          <img class="disinblock product_img MR15" src="orderlist.imgsrc"   />
          <div class="disinblock">
            <h5 class="product_name disinblock"><a routerLink="/order_detail">orderlist.prodname</a></h5>
            <div class="clearfix"></div>
            <p class="price disinblock">$ orderlist.price</p>
            <p class="M0 status disinblock ML15" [ngClass]=" 'processing' : orderlist.status === 'Processing', 'success' : orderlist.status === 'Delivered'"><i class="fa fa-fw" [ngClass]=" 'fa-exclamation-triangle' : orderlist.status === 'Processing', 'fa-check' : orderlist.status === 'Delivered'"></i>  orderlist.status</p>
          </div>
        </div>
        <div class="pull-right order_placed">
          <p><b>Ship to :</b> orderlist.shipto</p>
          <p><b>Delivered on :</b> orderlist.deliverydate</p>
        </div>
      </div>
    </div>
  </li>
</ul>

我在组件文件中导入了“管道”。但是还是不行

组件文件

import  Component,  ViewChild, ElementRef, OnInit, Pipe, PipeTransform  from '@angular/core';
import paymentservice from '../shared/transaction.service';
import FormsModule from '@angular/forms';
import  Observable  from 'rxjs/Observable';
import 'rxjs/Rx';
@Component(
  selector: 'myorders',
  templateUrl: `./app/templates/myorders/myorders.html`,
)
@Pipe(
  name: 'searchPipe',
  pure: false
)
export class myorderscomponent   implements OnInit 
   @ViewChild('input')
    input: ElementRef;
    orders: any[];
  constructor(private _services:paymentservice)

  
ngOnInit()
      this.orders = this._services.getorderlistmethod();
  let eventObservable = Observable.fromEvent(this.input.nativeElement, 'keyup')
      eventObservable.subscribe();

 onDateChanged(event:any) 
  console.log('onDateChanged(): ', event.date, ' - jsdate: ', new Date(event.jsdate).toLocaleDateString(), ' - formatted: ', event.formatted, ' - epoc timestamp: ', event.epoc);

myDatePickerOptions = 
      todayBtnTxt: 'Today',
      dateFormat: 'dd-mmm-yyyy',
      firstDayOfWeek: 'mo',
      sunHighlight: true,
      height: '34px',
      width: '100%',
      inline: false,
      disableUntil: year: 2016, month: 8, day: 10,
  ;

export class SearchPipe implements PipeTransform 
  transform(orders: any[], searchTerm: string): any[] 
      searchTerm = searchTerm.toUpperCase();
      return orders.filter(item => 
        return item.toUpperCase().indexOf(searchTerm) !== -1 
      );
  

【问题讨论】：

可以添加过滤代码吗？

您遇到了什么错误吗？或者什么不起作用？

我得到'无法建立连接。接收端不存在。”。如果我移除了管道，它的工作正常。

请显示您的组件和管道代码。

| searchPipe:'name':search" 传递 3 个参数。 orderlist 值、'name' 字符串和search 的值。 transform(data: any[], searchTerm: string) 只需要 2 个参数。

【参考方案1】：

可能是跨模块问题。

您的管道必须是模块的一部分，并且该模块必须导入到您的 app.module 中。检查这个答案。 The pipe ' ' could not be found angular2 custom pipe