Question

我想在我的项目中实现角材料自动完成功能，我想过滤人员列表并获取选定人员的ID并查看其信息，它正在工作，但仅在获得ID之后，我遇到了filterBy的错误.toLowerCase不是功能，我的过滤器停止工作。我的personne对象具有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);
}

}

我不知道错误在哪里谢谢您的帮助

Angumar材料自动完成，错误TypeError：filterBy.toLowerCase不是函数

0 个答案: