AngularMaterial自动完成应调用API每次显示建议
使用Observable和Subject来从API获得数据并更新自动完成建议。 每次输入时，使用自动完成控件中的事件，例如matAutocompleteSelected和matAutocompleteInput。 下面是示例代码，如何在每次输入时调用API并更新建议：
在component.ts文件中：
import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; import { HttpClient } from '@angular/common/http'; import { Observable, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'; import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
searchControl = new FormControl();
searchResults: any[] = [];
private searchTerms = new Subject
constructor(private http: HttpClient) { this.searchTerms.pipe( debounceTime(300), distinctUntilChanged(), switchMap((term: string) => this.search(term)) ).subscribe(data => { this.searchResults = data; }); }
search(term: string): Observablehttps://api.example.com/search?q=${term});
}
onAutocompleteSelected(event: MatAutocompleteSelectedEvent): void { // handle selected value }
onInputChange(): void { const term = this.searchControl.value; if (term && term.length >= 3) { this.searchTerms.next(term); } } }
在component.html文件中：
在这个例子中，每次在输入字段中键入至少3个字符时，searchTerms Subject将触发，并通过HTTP调用search方法来获取数据。然后通过