Angular mat-autocomplete：如何显示选项名称而不是输入中的值

使用Angular mat-autocomplete显示选项名称而不是输入中的值

typescript
export interface Option {
  value: string;
  name: string;
}

html
  
    {{ option.name }}
  

typescript
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
import { Option } from './option.model';
@Component({
  selector: 'app-autocomplete-example',
  templateUrl: './autocomplete-example.component.html',
  styleUrls: ['./autocomplete-example.component.css'],
})
export class AutocompleteExampleComponent {
  myControl = new FormControl();
  options: Option[] = [
    { value: 'apple', name: 'Apple' },
    { value: 'banana', name: 'Banana' },
    { value: 'orange', name: 'Orange' },
  ];
  filteredOptions: Observable;
  constructor() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }
  displayFn(option: Option): string {
    return option ? option.name : '';
  }
  private _filter(value: string): Option[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
  }
}