如何实现角度6中的选择下拉列表(按搜索过滤),如何通过对象的名称属性过滤对象

卡兰西斯

我正在运行angular6应用程序,我想实现自动完成功能,其中数据是要拖放的对象,在键入时必须对其进行过滤。

**template.html**
  <mat-form-field >
    <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
       <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>

打字稿

import { Observable } from 'rxjs';
import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators'; 


export class Component1 implements OnInit {

 objectOptions = [
  { name:'Angular' },
  { name:'Angular Material' },
  { name:'React' },
  { name: 'vue' }
  ];
customerFilterControl = new FormControl();

 ngOnInit() {

  this.filteredOptions = this.customerFilterControl.valueChanges.pipe(
    startWith(''),
    map(value => this._filter(value))
  );

  }

_filter(value:string):string[] {
    const filterValue = value.toLowerCase();
    return this.objectOptions.filter(option => option.toLowerCase().includes(filterValue)); // how do I filter values here
  }

  displayFn(subject) {
    return subject ? subject.name : undefined;  
  }

注意:我已经在app.module.ts中导入了以下模块MatSelectModule,MatAutocompleteModule,MatFormFieldModule,MatInputModule

当我尝试通过名称属性过滤对象时,它给我错误

头182

如果您提供了所得到的错误,将会有所帮助。

但是,说到我可以看到错误的地方,它就是这一行:

this.objectOptions.filter(option => option.toLowerCase().includes(filterValue))

option是一个对象,您正在尝试调用toLowerCase(),我想您尝试做的是:

this.objectOptions.filter(option => option.name.toLowerCase().includes(filterValue))

编辑刚刚看到了另一个错误。

_filter(value:string):string[]

当您实际上返回具有name属性的对象数组时,您将函数声明为返回字符串数组。如果您删除了返回类型并允许打字稿进行推断,那么您应该不再出错。或将其更改为:

_filter(value:string): {name: string}[]

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何通过属性数组从列表对象中过滤多个对象?

如何在VueJS中按对象属性过滤对象数组

如何按属性过滤两个 json 对象列表?

如何实现根据用户关键字进行搜索和过滤,以显示对象列表中的数据?

如何在AngularJS中按对象中的特定属性过滤?

如何按属性过滤对象数组

如何按列表过滤Realm对象

如何通过Js中的对象过滤对象

如何在AngularJS中按对象的属性过滤?

如何按 Angular 数组中的属性过滤对象?

如何在Typescript中按属性过滤对象类型的并集?

如何按对象数组中的所有属性过滤?

如何在angularJS中按对象属性过滤

如何按 GraphQL 中的字段值过滤列表对象?

如何通过NSDate属性过滤Realm对象

如何基于未知属性过滤对象列表

如何提取用户通过Angular中的mat-options(下拉列表)选择的对象的多个属性?

如何过滤搜索栏中的整个对象

按属性过滤功能,该属性是Mapbox中的对象列表

如何通过每个对象项的属性名称过滤一组对象?

如何返回按其属性名称过滤的Powershell对象属性通配符?

如何深层过滤(搜索)对象?

如何根据对象属性值在下拉列表中选择值-选择和角度

如何过滤数组中对象的属性

如何过滤对象 AngularJs 中的列表

如何使用 Mongoose 过滤列表中的对象?

如何为我的react组件按ID过滤数据列表以获取对象的名称

如何在JS中按对象过滤对象数组

通过ES6中的键过滤对象属性