フィルタパイプがangular2で動作していません

Question

プロジェクトにフィルタパイプを追加しましたが、ページがロードされていません。私は問題を見つけることができません。この問題に関して私を助けてください。これらは私の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> 

コンポーネントファイルに「Pipe」をインポートしました。しかし、まだ

コンポーネントファイルおそらく

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

クロスモジュールの問題は動作しません。

あなたのパイプはモジュールの一部でなければならず、このモジュールはあなたのapp.moduleに無人でなければなりません。この回答を確認してください。 The pipe ' ' could not be found angular2 custom pipe