Angular Material自动补全：实现动态API调用与数据绑定

核心问题梳理 #

• 硬编码的searchTerm未与输入框联动，无法动态获取用户输入
• filteredOptions的switchMap逻辑为空，未实现API调用
• newData是普通数组却误用async管道，不符合异步管道的使用要求
• 未实现“输入≥2个字符才触发API”的限制
• 手动调用的showConfig方法未关联输入事件

修改后的组件TS文件 #

import { Component, OnInit } from '@angular/core';
import { BetaService } from '../beta.service';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged, switchMap, filter, map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { Item } from '../model';

@Component({
  selector: 'app-find',
  templateUrl: './find.component.html',
  styleUrls: ['./find.component.scss']
})
export class FindComponent implements OnInit {
  myControl = new FormControl();
  count = 10;
  filteredOptions: Observable<Item[]>;

  constructor(private betaService: BetaService) {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      debounceTime(400), // 防抖400ms，避免频繁请求
      distinctUntilChanged(), // 输入值不变时不重复触发
      filter(term => term.length >= 2), // 仅输入≥2个字符才调用API
      switchMap(searchTerm => 
        this.betaService.getSearchAutoSuggests(searchTerm, this.count).pipe(
          map(res => res.Items) // 提取返回结果中的Items数组
        )
      )
    );
  }

  ngOnInit(): void {}
}

修改后的HTML文件 #

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="输入搜索内容" aria-label="搜索" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <!-- 绑定filteredOptions的异步结果，显示Item的具体属性（比如Name，根据你的模型调整） -->
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.Name">
        {{ option.Name }}
      </mat-option>
      <!-- 可选：显示加载状态提示 -->
      <mat-option *ngIf="(betaService.searching$ | async)">加载中...</mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

优化后的Service文件（添加加载状态） #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Inject, Injectable } from '@angular/core';
import { Client, CLIENT_TOKEN } from 'projects/vhap/src/public-api';
import { BehaviorSubject, Observable } from 'rxjs';
import { distinctUntilChanged, finalize } from 'rxjs/operators';
import { Items } from './model';

const httpOptions =  {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    Authorization: 'sometoken'
  })
}

@Injectable({ providedIn: 'root' })
export class BetaService {
  private readonly searchingSubject = new BehaviorSubject<boolean>(false);
  private apiUrl = 'eval/api/Test/GetSearchAutoSuggests';
  readonly searching$ = this.searchingSubject.asObservable().pipe(distinctUntilChanged());

  constructor(
    private readonly http: HttpClient,
    @Inject(CLIENT_TOKEN) private readonly client: Client
  ) {}

  public getSearchAutoSuggests(searchTerm: string, count: number): Observable<Items> {
    this.searchingSubject.next(true); // 请求开始时标记加载中
    const url = `${this.apiUrl}?searchTerm=${searchTerm}&count=${count}`;
    return this.http.get<Items>(url, httpOptions).pipe(
      finalize(() => this.searchingSubject.next(false)) // 请求结束后重置加载状态
    );
  }
}

关键修改说明 #

1. 动态输入绑定：直接通过myControl.valueChanges获取用户实时输入，替代硬编码的searchTerm
2. 输入长度限制：用filter操作符确保只有输入≥2个字符时才触发API请求
3. API调用逻辑：在switchMap中调用服务的API方法，自动取消前一次未完成的请求，避免冗余请求
4. 异步管道修正：使用filteredOptions这个Observable直接绑定到模板，正确使用async管道
5. 加载状态管理：通过Service的searching$流实现全局加载状态，模板可实时显示加载提示
6. 冗余代码清理：删除未使用的showConfig方法、多余变量和导入

内容的提问来源于stack exchange，提问作者Anamika Singh