过滤管在angular2中不起作用

Question

I added my filter pipe in my project but the page is not loading. I am unable to find issue.Please help me on this issue. These are my HTML code and component file

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

I imported "Pipe" in component file. But still is not working

Component File

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

Answer 1

Probably a cross-module problem.

Your pipe must be part of a module, and this module must immported in your app.module. Check this answer. The pipe ' ' could not be found angular2 custom pipe