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

过滤管在angular2中不起作用

1 个答案: