Angular 5 Material 2 - 自动完成从外部API获取数据

typescript

# Angular 5 Material 2 - 自动完成从外部API获取数据

Angular 5和Material 2的结合为开发人员提供了丰富的工具，以创建现代、响应式的Web应用程序。在这篇文章中，我们将重点介绍如何在Angular 5应用程序中使用Material 2库中的自动完成组件，并通过外部API获取数据填充自动完成建议。

## 准备工作

在开始之前，请确保你的项目已经使用Angular 5和Material 2进行设置。你可以使用Angular CLI来创建一个新项目，并安装Material 2：

bash
ng new my-angular-app
cd my-angular-app
ng add @angular/material

然后，选择自己需要的Material 2组件，其中包括自动完成组件。

bash
ng generate @angular/material:address-autocomplete address

以上命令将生成自动完成组件，并将其添加到你的项目中。

## 设置自动完成组件

在你的组件文件（例如address.component.ts）中，导入MatAutocomplete和MatAutocompleteSelectedEvent：

typescript
import { MatAutocomplete } from '@angular/material/autocomplete';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

然后，设置一个变量来存储从外部API获取的建议数据：

typescript
suggestedAddresses: string[] = [];

接下来，创建一个方法来获取外部API的数据。在这里，我们使用HttpClient模块：

typescript
import { HttpClient } from '@angular/common/http';
// 在构造函数中注入HttpClient
constructor(private http: HttpClient) {}
// 获取建议地址
getSuggestedAddresses(query: string) {
  const apiUrl = <code>https://api.example.com/addresses?q=${query}</code>;
  this.http.get<string[]>(apiUrl).subscribe(data => {
    this.suggestedAddresses = data;
  });
}

## HTML模板

在你的HTML模板中，使用MatAutocomplete和formControl来启用自动完成：

html
<input matInput placeholder="输入地址" [matAutocomplete]="auto" [formControl]="addressControl">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onAddressSelected($event)">
  <mat-option *ngFor="let address of suggestedAddresses" [value]="address">
    {{ address }}
  </mat-option>
</mat-autocomplete>

## 处理选定事件

最后，在你的组件中处理地址选定事件：

typescript
onAddressSelected(event: MatAutocompleteSelectedEvent) {
  // 处理选定事件，可以在这里执行其他逻辑
  console.log('Selected Address:', event.option.viewValue);
}

至此，你已经成功地集成了Angular 5和Material 2的自动完成组件，并通过外部API获取数据填充建议。这为用户提供了更智能、更友好的输入体验，同时保持了Web应用程序的现代感。在你的实际项目中，记得替换API的URL和其他相关信息，以适应你的需求。

希望这篇文章对你在Angular 5中使用Material 2的自动完成组件时有所帮助！