Angular2物料自动完成问题

我在表单中有两个材料自动完成输入

1） 第一个可以处理动态数据，除了键盘上的箭头按钮不起作用外，其他功能都很好。选择带有箭头的选项并输入是不可能的

<mat-form-field>
    <input type="text" class="form-control" id="autoData" formControlName="autoData" matInput [matAutocomplete]="auto" (keyup)="getData($event.target.value)">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                    <mat-option  (onSelectionChange)="getMoreData(option.text)" *ngFor="let option of testData; let in=index" [value]="option">
                        {{ option.text }}
                    </mat-option>
            </mat-autocomplete>
</mat-form-field>

{{option.text}

2） 第二个用于静态数据数组。问题-它显示所有可能的选项，在输入中键入字母时不过滤选项。键盘也有问题

代码是一样的

{{option.name+“”+option.cat}

我已经完成了对动态数据使用angular并对数据进行了过滤

html文件

     <mat-form-field>
          <input matInput [(ngModel)] = "builderCompanyName" placeholder="Builder Company Name" [formControl]="CommercialControl" [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let name of builderCompanyNameArray | listFilter:builderCompanyName" [value]="name" (click)="select(CommercialControl.value)">
              {{ name }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>

下面是过滤结果

希望这对你有帮助。谢谢

---

谢谢，但是如果我有一排物品呢？选项=[{“id”：1，“name”：“color”，“cat”：“red”}，{“id”：2，“name”：“color”，“cat”：“blue”}，{“id”：3，“name”：“color”，“cat”：“green”}]；-在这种情况下如何过滤？对于对象数组，请查看我的回答。这可能会对您有所帮助，链接在这里谢谢

import { Pipe, PipeTransform } from '@angular/core';

 @Pipe({
   name: "listFilter" 
 })

 export class ListFilterPipe implements PipeTransform {
 transform(items: any[], searchText: string): any[] {
  if (!items) return [];
  if (!searchText) return items;
  searchText = searchText.toLowerCase();
  return items.filter(it => {
    // console.log(it);
    return it.toLowerCase().includes(searchText);
   });
  }
 }