管道过滤器jhipster 4不工作角2

Question

你好我是一个jhipster新用户，我想在我的实体上使用todo过滤器，所以我发现人们使用管道我使用它没有错误，但它不起作用。 我使用角度为2的jhipster 4。 请somone可以帮助我。 这是我在COMPONENT上的代码：

import { Component, OnInit, OnDestroy} from '@angular/core';
import { Response } from '@angular/http';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
import { EventManager, ParseLinks, PaginationUtil, JhiLanguageService,                              

AlertService } from 'ng-jhipster';

import { Fichemedicale } from './fichemedicale.model';
import { FichemedicaleService } from './fichemedicale.service';
import { ITEMS_PER_PAGE, Principal } from '../../shared';
import { PaginationConfig } from '../../blocks/config/uib-pagination.config';
import {ArrayFilterPipe} from './ArrayFilterPipe';

@Component({
    selector: 'jhi-fichemedicale',

    templateUrl: './fichemedicale.component.html',

})

export class FichemedicaleComponent implements OnInit, OnDestroy {

currentAccount: any;
fichemedicales: Fichemedicale[];
error: any;
success: any;
eventSubscriber: Subscription;
routeData: any;
links: any;
totalItems: any;
queryCount: any;
itemsPerPage: any;
page: any;
predicate: any;
previousPage: any;
reverse: any;



constructor(
    private jhiLanguageService: JhiLanguageService,
    private fichemedicaleService: FichemedicaleService,
    private parseLinks: ParseLinks,
    private alertService: AlertService,
    private principal: Principal,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private eventManager: EventManager,
    private paginationUtil: PaginationUtil,
    private paginationConfig: PaginationConfig
) {
    this.itemsPerPage = ITEMS_PER_PAGE;

    this.routeData = this.activatedRoute.data.subscribe(data => {
        this.page = data['pagingParams'].page;
        this.previousPage = data['pagingParams'].page;
        this.reverse = data['pagingParams'].ascending;
        this.predicate = data['pagingParams'].predicate;
    });
    this.jhiLanguageService.setLocations(['fichemedicale']);
}



loadAll() {
    this.fichemedicaleService.query({
        page: this.page - 1,
        size: this.itemsPerPage,
        sort: this.sort()}).subscribe(
        (res: Response) => this.onSuccess(res.json(), res.headers),
        (res: Response) => this.onError(res.json())
    );
}
loadPage (page: number) {
    if (page !== this.previousPage) {
        this.previousPage = page;
        this.transition();
    }
}


//when you fetch collection from server.
transition() {
    this.router.navigate(['/fichemedicale'], {queryParams:
        {
            page: this.page,
            size: this.itemsPerPage,
            sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
        }
    });
    this.loadAll();
}

clear() {
    this.page = 0;
    this.router.navigate(['/fichemedicale', {
        page: this.page,
        sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
    }]);
    this.loadAll();
}
ngOnInit() {
    this.principal.identity().then((account) => {
        this.currentAccount = account;
    });
    this.registerChangeInFichemedicales();
}

ngOnDestroy() {
    this.eventManager.destroy(this.eventSubscriber);
}

trackId (index: number, item: Fichemedicale) {
    return item.id;
}





 registerChangeInFichemedicales() {
        this.eventSubscriber = `                                                               

  this.eventManager.subscribe('fichemedicaleListModification', (response)        

  => this.loadAll());`
}

sort () {
    let result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')];
    if (this.predicate !== 'id') {
        result.push('id');
    }
    return result;
}

private onSuccess (data, headers) {
    this.links = this.parseLinks.parse(headers.get('link'));
    this.totalItems = headers.get('X-Total-Count');
    this.queryCount = this.totalItems;
    // this.page = pagingParams.page;
    this.fichemedicales = data;
}

private onError (error) {
    this.alertService.error(error.message, null, null);
}

}

管道类是：

import { Pipe, PipeTransform} from '@angular/core';

import { Fichemedicale } from './fichemedicale.model';


@Pipe({
    name: 'filter'
})

export class ArrayFilterPipe implements PipeTransform {
    transform(Fichemedicales: Fichemedicale[], search: any): any {
        if(search == undefined) return Fichemedicales ;

        return Fichemedicales.filter(function(Fichemedicale){
            return         

 Fichemedicale.nom.toLowerCase().includes(search.toLowerCase());

        })

 }}

这是观点：

<div>
<h2><span 


   jhiTranslate="avancementApp.fichemedicale.home.title">Fichemedicales
            </span>







    <button class="btn btn-primary float-xs-right create-fichemedicale" 
        [routerLink]="['/', { outlets: { popup: ['fichemedicale-new'] } 
        }]">
        <span class="fa fa-plus"></span>
        <span  
      jhiTranslate="avancementApp.fichemedicale.home.createLabel">
        Create new Fiche medicale
        </span>
    </button></h2>
<jhi-alert></jhi-alert>

<div class="container-fluid">
    <div class="row">
    </div>
</div>
<br/>
<div class="table-responsive" *ngIf="fichemedicales">
 <div class="col-md-4">Search : <input type="text" [(ngModel)]="search" 
        /></div>
    <table class="table table-striped">
        <thead>
        <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" 
       [callback]="transition.bind(this)">

        <th jhiSortBy="nom">Fiche Medicale<span class="fa fa-sort"></span>
      </th>

        <th></th>
        </tr>
        </thead>
        <tbody>

        <tr *ngFor="let fichemedicale of fichemedicales | filter:search">

            <td>Fiche de {{fichemedicale.nom}} {{fichemedicale.prenom}}
           </td>

            <td class="text-xs-right">
                <div class="btn-group flex-btn-group-container">
                    <button type="submit"
                            [routerLink]="['../fichemedicale', 
          fichemedicale.id ]"
                            class="btn btn-info btn-sm">
                        <span class="fa fa-eye"></span>
                        <span class="hidden-md-down" 
        jhiTranslate="entity.action.view">View</span>
                    </button>
                    <button type="submit"
                            [routerLink]="['/', { outlets: { popup: 
      'fichemedicale/'+ fichemedicale.id + '/edit'} }]"
                            replaceUrl="true"
                            class="btn btn-primary btn-sm">
                        <span class="fa fa-pencil"></span>
                        <span class="hidden-md-down" 
       jhiTranslate="entity.action.edit">Edit</span>
                    </button>
                    <button type="submit"
                            [routerLink]="['/', { outlets: { popup: 
          'fichemedicale/'+ fichemedicale.id + '/delete'} }]"
                            replaceUrl="true"
                            class="btn btn-danger btn-sm">
                        <span class="fa fa-remove"></span>
                        <span class="hidden-md-down"            
       jhiTranslate="entity.action.delete">Delete</span>
                    </button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
   </div>
    <div class="text-xs-center" *ngIf="fichemedicales &&  
   fichemedicales.length">
        <jhi-item-count [page]="page" [total]="queryCount"  
     [itemsPerPage]="itemsPerPage"></jhi-item-count>
        <ngb-pagination [collectionSize]="totalItems" [(page)]="page"                      
    (pageChange)="loadPage(page)"></ngb-pagination>
    </div>
    </div>