Angular 角度自动完成对象

我正在努力理解如何在使用对象时使用“角度材质自动完成”。我基本上遵循了Angular文档，只是用一个options对象替换了options数组，但我不知道如何让它工作。介意看看这里吗？如果这个问题在其他地方有很多答案，我将删除它

下面是我的html和ts组件。所有的进口和所有的东西都是绝对正确的，所以我不会展示任何东西

<mat-form-field>
  <input matInput [formControl]="myControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

  ###############################

  myControl: FormControl = new FormControl();
  filteredOptions: Observable<string[]>;

  options = [
    {color: 'One'},
    {color: 'Two'},
    {color: 'Three'},
  ];

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(val => this.filter(val))
      );
  }

  filter(val: string): string[] {
    return this.options.filter(option =>
      option.toLowerCase().includes(val.toLowerCase()));
  }

{{option}}
###############################
myControl:FormControl=newformcontrol（）；
过滤装置：可观察；
选项=[
{color:'One'}，
{color:'Two'}，
{颜色：'三'}，
];
恩戈尼尼特（）{
this.filteredOptions=this.myControl.valueChanges
.烟斗(
startWith（“”），
映射（val=>this.filter（val））
);
}
筛选器（val:string）：字符串[]{
返回此.options.filter（选项=>
option.toLowerCase（）.includes（val.toLowerCase（））；
}

就快到了，只需将数组映射到对象的内部属性即可。这是必需的，因为filter函数的返回值是字符串数组

filter(val: string): string[] {
  return this.options.map(x => x.color).filter(option =>
    option.toLowerCase().includes(val.toLowerCase()));
}

---