Автозаполнение ангумарского материала, ОШИБКА TypeError: filterBy.toLowerCase не является функцией - PullRequest
Новая
       9

Автозаполнение ангумарского материала, ОШИБКА TypeError: filterBy.toLowerCase не является функцией

0 голосов
/ 07 мая 2019

Я хочу реализовать автозаполнение углового материала в своем проекте, я хочу отфильтровать свой список персон и получить идентификатор выбранного сотрудника и просмотреть его информацию, и это работает, но только после получения идентификатора у меня появляется ошибка filterBy .toLowerCase не является функцией, и мой фильтр перестает работать. Мой личный объект имеет id_personne, имя, фамилию в качестве свойств. .html 

<form style="padding-left: 10px;">
    <mat-form-field>
      <input type="text" matInput
             [matAutocomplete]="personneSearch"
             [formControl]="searchCtrl"
             placeholder="Chercher une personne"
      >
    </mat-form-field>
    <mat-autocomplete
      #personneSearch="matAutocomplete"
      [displayWith]="displayPersonne"
      (optionSelected)="selectedPersonne($event.option.value)"
    >
      <mat-option
        *ngFor="let personne of filteredPersonnes | async"
        [value]="personne">
        {{personne.name | uppercase}} {{personne.surname}}
      </mat-option>
    </mat-autocomplete>
  </form>

мой .ts файл 

import { Component, OnInit } from '@angular/core';
import { FormControl} from '@angular/forms';
import { Personne } from '../../Models/personne';
import { PersonneService } from '../../services/personne.service';
// import for autocomplete
import { Observable } from 'rxjs';
import { map, startWith} from 'rxjs/operators';

@Component({
 selector: 'app-sidebar',
 templateUrl: './sidebar.component.html',
 styleUrls: ['./sidebar.component.css']
 })
export class SidebarComponent implements OnInit {

// personnes list
listPersonnes: Personne[];
// search control
searchCtrl = new FormControl();
filteredPersonnes: Observable<Personne[]>;

constructor(private personneService: PersonneService) {}

ngOnInit() {
 this.getAllPersonnes();
 this.filteredPersonnes = this.searchCtrl.valueChanges.pipe(
  startWith(''),
  map(value => this.filterPersonnes(value))
);
}

getAllPersonnes(){
this.personneService.getAllPersonnes()
  .subscribe(
    (data: Personne[]) => {
      this.listPersonnes = data;
    },
    (error) => {
      console.log('Error in get all personnes');
      console.log(error);
    }
  );
 }

displayPersonne(subject) {
  return subject ? subject.nom_usage + ' ' + subject.prenom : undefined;
}

private filterPersonnes(filterBy: string): Personne[] {
 if(filterBy) {
  const filterValue = filterBy.toLowerCase();
  console.log('this.personnes list !!!!!!!!!' + this.listPersonnes);
  if(!this.listPersonnes) return ;
  return this.listPersonnes.filter(
    personne => 
personne.nom_usage.toLocaleLowerCase().includes(filterValue)
  );
 }
}

selectedPersonne(val) {
console.log(val.id_personne);
}

}

а я не понимаю где ошибка спасибо за вашу помощь

...