使用自动完成如何过滤多个属性上的对象

Question

我正在开发 Angular 6 应用程序，我想迭代这个对象。我是 rxjs 的新手，我不知道如何根据多个属性过滤对象，尽管我尽力做一些事情。

当我输入名称或类型时，它必须自动完成并过滤对象

这是我尝试过的，但这不起作用

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

**typescript.ts**

//object 

  objectOptions = [
  { name:'Angular', type:"xyz"  },
  { name:'Angular Material',type:"abc" },
  { name:'React', type:"mnq" },
  { name: 'vue', type:"sds" }
  ];

ngOnInit() {
   this.filteredOptions = this.customerFilterControl.valueChanges.pipe(                    
     startWith(''),
     map(value => this.filterx(value))
   );
 }  

 filterx(value:string):string[] {
     const filterValue = value.toLowerCase();
     return this.objectOptions.map(function(x){if(x.name ||x.type) return x.name; //error detailed 
     below}).filter(option => option.toLowerCase().includes(filterValue));
  }

错误：如果我返回 x 地图属性会抱怨，因为它仅返回 string[]

Answer 1

感谢@JB Nizet

**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}} {{option.type}}
             </mat-option>
           </mat-autocomplete>
      </mat-form-field> 

**typescript.ts**

//object 

  objectOptions = [
  { name:'Angular', type:"xyz"  },
  { name:'Angular Material',type:"abc" },
  { name:'React', type:"mnq" },
  { name: 'vue', type:"sds" }
  ];

ngOnInit() {
   this.filteredOptions = this.customerFilterControl.valueChanges.pipe(                    
     startWith(''),
     map(value => this.filterx(value))
   );
 }  

 filterx(value:string):string[] {
     const filterValue = value.toLowerCase();
     return this.objectOptions.filter(function(option) {
       if(option.type.includes(filterValue) || option.name.includes(filterValue)) {
       return option;
     }
    });