简体   繁体   English

mat-autocomplete 键值过滤器问题

[英]mat-autocomplete key value filter issue

I am using angular material autocomplete to filter data, each option has name and value.我正在使用角度材料自动完成来过滤数据,每个选项都有名称和值。

this is my hml code:这是我的 hml 代码:

<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>

and my .ts file:和我的 .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));
}

the filter function is called after every filtering and works fine过滤器函数在每次过滤后调用并且工作正常

my problem is after selecting an option the value that gets by this.autoCompleteControl.valueChanges is the numeric value of the option and not the string name so it throws an exception:我的问题是在选择一个选项后,this.autoCompleteControl.valueChanges 获得的值是该选项的数值而不是字符串名称,因此它会引发异常:

value.toLowerCase is not a function value.toLowerCase 不是函数

any idea how can i solve it?知道我该如何解决吗?

In HTML page, Use [value]="option" instead of [value]="option.value" as like在 HTML 页面中,像这样使用[value]="option"而不是[value]="option.value"

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

And In .ts file, add the below code as follow并在.ts文件中,添加以下代码如下

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

You defined the value attribute of option will be set when you select an option.您定义的optionvalue属性将在您选择一个选项时设置。 You can change that value to name.您可以将该值更改为名称。

<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.name" > // change value to name
      {{option.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Instead of passing [value] as option.value , you can pass option , and change the filter and displayFunction您可以传递option ,而不是将 [value] 作为option.value传递,并更改过滤器和 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>

And in the component并且在组件中

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));
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM