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

typescript

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

Angular框架的mat-autocomplete组件是一种方便的方式，可以通过自动完成的形式提供用户输入的选项。然而，有时候我们希望在用户开始输入时显示选项的名称，而不是用户实际输入的值。在这篇文章中，我们将探讨如何通过一些简单的步骤实现这一目标，并提供一个示例代码。

理解mat-autocomplete

在开始之前，让我们简要了解一下mat-autocomplete。该组件主要用于创建一个带有自动完成功能的输入框，可以在用户键入时提供匹配的选项。通常情况下，输入的值与选项列表中的值一一对应。但有时我们可能需要在输入时显示选项的名称，而不是用户实际输入的值。

显示选项名称的步骤

要实现在用户输入时显示选项名称的效果，我们可以采取以下步骤：

1. 创建数据模型： 确保你的数据模型包含选项的名称和相应的值。

2. 设置mat-autocomplete： 在mat-autocomplete组件中，使用displayWith属性来指定要显示的字段，这个字段就是选项的名称。

3. 自定义显示值： 在你的组件中，创建一个方法，该方法根据输入值返回匹配的选项名称。

现在，让我们通过一个简单的例子来演示这些步骤。

示例代码

首先，创建一个简单的数据模型：

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

然后，设置mat-autocomplete：

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

接下来，在组件中实现相关逻辑：

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<Option[]>;
  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));
  }
}

通过上述步骤，我们成功地实现了在Angular的mat-autocomplete中显示选项名称而不是用户输入值的效果。通过这种方法，我们可以提高用户体验，使得在输入过程中更容易理解和选择正确的选项。希望这篇文章能够帮助你更好地使用mat-autocomplete组件。