はTypeError：</p> <p>未定義

Question

私は私が正しく指示をfollowerdしたカスタムパイプを作成しようとしていますが、私は私のリストにフィルタ処理しようとすると、それは私にそのエラーを与えておくのプロパティ「toLocaleLowerCase」を読み取ることができませんすることはここに私のパイプコード

ですここ

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> 

これを引き起こしているものの任意のアイデア？ここ

Answer 1

間隔が問題になることがあります。

.indexOf(filterBy) ! ==-1) 

あるべき：強打と二重の等号の間にスペースがないこと

.indexOf(filterBy) !== -1) 

注意してください。