TypeError: Impossible de lire la propriété « toLocaleLowerCase » undefined

Question

Je suis en train de créer un tuyau personnalisé je followerd les instructions correctement, mais il continue à me donner cette erreur lorsque je tente de filtrer ma liste

voici mon code de conduite

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

ici est mon interface

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; 


} 

mon composant

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


} 

et mon modèle

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

Toute idée de ce qui est la cause?

Answer 1

L'espacement ici est peut-être le problème:

.indexOf(filterBy) ! ==-1) 

Il devrait être:

.indexOf(filterBy) !== -1) 

avis qu'il n'y a pas d'espace entre le bang et les doubles égaux.