过滤管在angular2中不起作用答案

【问题标题】：Filter pipe is not working in angular2过滤管在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}}" width="100" height="60" />
          <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 个参数。

标签： angular

【解决方案1】：

可能是跨模块问题。

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

【讨论】：