使用Angular Material实现的自动完成搜索功能出错

Question

错误

TypeError: Cannot read property 'name' of undefined

HTML表单

输入字段

<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="name" [matAutocomplete]="auto">

自动填充HTML

<mat-autocomplete #auto="matAutocomplete">
  <div *ngIf="filteredOptions" >
    <mat-option  *ngFor="let person of filteredOptions | async" [value]="person.name">
      {{person.name}}
    </mat-option>
  </div>
</mat-autocomplete>

有错误的组件

名称和基础被视为FormControl：

filteredOptions: Observable < string[] > ;

ngOnInit() {
  this.filteredOptions = this.name.valueChanges.pipe(map(val => this.filter(
    val)));
}
filter(val: string): string[] {
    var filteredData = [];
    if (this.persons) {
      for (var i = 0; i < this.persons.length; i++) {
        if (this.basis.value === "name" || this.basis.value === "" || this.basis
          .value === undefined || this.basis.value === null) {
          if (this.persons[i].name.toLowerCase().indexOf(this.name.value.toLowerCase()) !==
            -1) {
            filteredData[i] = this.persons[i];
          }
        } else if (this.basis.value === "id") {
          if (this.persons[i].id.toLowerCase().indexOf(this.name.value.toLowerCase()) !==
            -1) {
            filteredData[i] = this.persons[i];
          }
        }
      }

      return filteredData;
    }*

Answer 1

问题源于以下行，该行在某些条件下使filteredData数组填充undefined值：

filteredData[i] = this.persons[i];

在filter方法的开头，filteredData是一个空数组。然后检查persons数组是否匹配，如果找到匹配，则将其添加到与filteredData数组中相同位置的persons数组中：{{1} }。

为什么会有问题？假设filteredData[i] = this.persons[i];数组的前两个元素不匹配;第三个是比赛。因此，persons数组的第三个元素被赋值给空persons数组的第三个位置。

在Javascript中，当您为高于数组大小的位置指定值时，数组会被filteredData填充。

示例：

undefined

解决方案

改为使用const array = []; array[3] = 'test'; console.log(array[0]); // => undefined 。