TypeError: Cannot read property 'toLocaleLowerCase' of undefined

Question

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

这是我的管道代码

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)

注意爆炸和双等号之间没有空格。

TypeError: Cannot read property 'toLocaleLowerCase' of undefined

TypeError: Cannot read property 'toLocaleLowerCase' of undefined

javascript

typescript

angular-pipe

angular