2

我正在尝试创建一个自定义管道，我已正确遵循说明，但是当我尝试过滤列表时它一直给我该错误

这是我的管道代码

import { Pipe, PipeTransform } from '@angular/core';
import { Icandidat } from './candidat/icandidat';

@Pipe({
    name :'personFilter'
})

export class PipeFilter implements PipeTransform{


    transform(value: Icandidat[], filterBy : string) : Icandidat[] {
        filterBy = filterBy ? filterBy.toLocaleLowerCase(): null;
        return filterBy? value.filter((person : Icandidat)=>
            person.candidatNom.toLocaleLowerCase().indexOf(filterBy) ! ==-1) : value; 
     }
}

这是我的界面

export interface Icandidat {
    prog1 : string ;
    progName1 : string ;
    progEl1 : string ;
    candInfo : any [];
    filterBy : string ;

    candidatID : number;
    candidatNom : string;
    canditatPrenom : string ;
    candidatParti : string;
    candidatDepartement : string;
    candidatCommune : string ;

    candidats : Icandidat;
    errorMessage : string;


}

我的组件

import { PaeServiceService } from '../pae-service.service';
import { Icandidat } from './icandidat';
import { NgModel } from '@angular/forms/src/directives';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-candidat',
  templateUrl: './candidat.component.html',
  styleUrls: ['./candidat.component.css'],
  providers : [PaeServiceService]
})
export class CandidatComponent implements OnInit {
    prog1 : string ="Programme d'Appui aux Elections";
    progName1 : string ="Enquête sur les candidats";
    progEl1 : string ="Listes des candidats ciblés";
    candInfo : any [];
    filterBy : string ="Ronny";

    candidatID : number;
    candidatNom : string;
    canditatPrenom : string ;
    candidatParti : string;
    candidatDepartement : string;
    candidatCommune : string ;

    candidats : Icandidat;
    errorMessage : string;

    constructor (private _candidatService : PaeServiceService){

    }

    ngOnInit(): void {
      this._candidatService.getCandidatInfo()
            .subscribe(candidats => this.candInfo = candidats,
            error => this.errorMessage = <any>error);
    }


}

和我的模板

 <table class="bordered highlight" *ngIf='candInfo && candInfo.length'>
                <thead>
                  <tr >
                      <th>Nom</th>
                      <th>Prénom</th>
                      <th>Parti Politique</th>
                      <th>Département</th>
                      <th>Commune</th>
                  </tr>
                </thead>

                <tbody>
                  <tr *ngFor = 'let candidats of candInfo | personFilter : filterBy'>
                    <td>{{candidats.nom}}</td>
                    <td>{{candidats.prenom}}</td>
                    <td>{{candidats.parti}}</td>
                    <td>{{candidats.departement}}</td>
                    <td>{{candidats.commune}}</td>
                  </tr>

                </tbody>
          </table>

知道是什么原因造成的吗？

4

1 回答 1

2

这里的间距可能是问题所在：

.indexOf(filterBy) ! ==-1)

它应该是：

.indexOf(filterBy) !== -1)

请注意，bang 和双等号之间没有空格。

于 2017-06-20T19:31:04.043 回答