Question

我正在使用角度材料自动完成功能来过滤数据，每个选项都有名称和值。

这是我的html代码：

<mat-form-field [appearance]="appearance">
  <mat-label>{{label}}</mat-label>
  <input type="text" aria-label="Number" matInput [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" >
      {{option.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

和我的.ts文件：

ngOnInit() {
console.log(this.options);
this.filteredOptions = this.autoCompleteControl.valueChanges
  .pipe(
    startWith(''),
    map(value => this.filter(value))
  );
}

private filter(value: string): string[] {
 console.log(value)
 const filterValue = value.toLowerCase();
 return this.options.filter(option => option.key.includes(filterValue));
}

每次过滤后都会调用filter函数，并且效果很好

我的问题是选择一个选项后，this.autoCompleteControl.valueChanges获得的值是选项的数字值，而不是字符串名，因此会引发异常：

value.toLowerCase不是函数

知道如何解决吗？

Answer 1

在HTML页面中，使用[value]="option"代替[value]="option.value"

<mat-option *ngFor="let option of filteredOptions | async" [value]="option" >
  {{option.name}}
</mat-option>

然后在 .ts 文件中，添加以下代码，如下所示

private filter(value: any): any[] {
 console.log(value)
 const filterValue = value.name.toLowerCase();
 return this.options.filter(option => option.key.includes(filterValue));
}

Answer 2

您定义的value的{{1}}属性将在您选择一个选项时设置。您可以将该值更改为name。

option

Answer 3

您可以通过传递option.value来更改[value]作为option，并更改过滤器和displayFunction

<mat-form-field [appearance]="appearance">
  <mat-label>{{label}}</mat-label>
  <input type="text" aria-label="Number" matInput [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{option.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

在组件中

displayFn(option){
  if(option && option.name) {
    return option.name.toLowerCase();
  } else {
    return option
  }
}

private filter(value: string): string[] {
   console.log(value)
   const filterValue = value.name.toLowerCase();
   return this.options.filter(option => option.key.includes(filterValue));
}

垫自动完成键值过滤器问题

3 个答案: