Angular Material 7 – 自动完成

自动完成是一个常用的用户交互形式，它可以帮助用户找到他们正在寻找的选项。在Angular Material 7中，我们可以很容易地添加自动完成功能。本文将介绍Angular Material 7中如何使用自动完成来创建一个搜索框。

添加Angular Material到你的应用程序

首先，我们需要将Angular Material 7添加到我们的应用程序中。我们可以通过以下命令来完成这个过程：

ng add @angular/material

这个命令会自动将所需的材料组件添加到你的应用程序中。在这个过程中，你将被提示选择一个主题和颜色方案。完成后，你的应用程序就已经准备好使用Angular Material 7了。

创建自动完成组件

下一步是创建自动完成组件。在这个例子中，我们将创建一个搜索框，当用户输入时，自动完成列表将在搜索框下方呈现。以下是我们的HTML代码：

<mat-form-field>
  <input type="text" placeholder="搜索" aria-label="搜索" matInput [formControl]="searchCtrl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

让我们来看看这段代码做了什么。我们首先创建了一个mat-form-field，以包装我们的输入字段。我们创建了一个input元素，并将其绑定到一个名为searchCtrl的表单控制器。matAutocomplete指令告诉组件我们将使用自动完成。我们还为自动完成创建了一个本地引用#auto。

在mat-autocomplete元素内部，我们使用*ngFor循环列举了所有被过滤的选项。每个选项都被包裹在mat-option元素中，它具有一个值。请注意，我们在value中绑定了整个选项，因此当用户选择一个选项时，我们将获得整个选项对象，而不仅仅是它的值。

创建过滤器控制器

现在我们需要创建一个表单控制器来过滤我们的选项。我们将在ngOnInit生命周期钩子中创建这个控制器。

ngOnInit() {
  this.searchCtrl.valueChanges.subscribe(value => {
    this.filter(value);
  });
}

我们会订阅searchCtrl的值更改事件，并通过调用filter函数来过滤选项。

filter(value: string) {
  this.filteredOptions = this.options.filter(option => option.toLowerCase().indexOf(value.toLowerCase()) === 0);
}

我们的filter函数遍历所有的选项，将不符合条件的选项过滤掉。我们使用了一个简单的字符串匹配算法来过滤选项。如果一个选项包含用户的输入值，则它会被保留，否则它将被过滤掉。我们将过滤后的选项保存在一个叫做filteredOptions的可观察对象中。

结论

在Angular Material 7中，创建自动完成组件非常简单，只需要几行代码就可以实现。我们首先添加了Angular Material 7到我们的应用程序中，然后创建了一个自动完成组件，当用户输入时，自动完成列表将在搜索框下方呈现。最后，我们创建了一个表单控制器来过滤我们的选项，并将过滤后的选项保存在一个可观察对象中。如果你正在考虑添加自动完成功能到你的Angular应用程序中，使用Angular Material 7是一个快速，简单的方法。