Angular中使用subscribe遍历接口返回对象数组并提取name属性的方法

问题解决方案 #

1. 先修正类型定义与服务返回值 #

你当前服务定义的返回类型是Observable<LocationTypes>，但后端返回的是对象数组，所以首先要对齐类型：

// 先定义单个地点的结构
interface LocationItem {
  name: string;
  // 补充其他后端返回的属性，比如id、地址等
}

修正后的服务代码：

// SERVICE FILE
getLocations(): Observable<LocationItem[]>  {
  const makeReqURL = `${this.apiURL}/`;
  return this.http.get<LocationItem[]>(makeReqURL);
}

注意：如果后端返回的是带包装的结构（比如{code:200, data: [...], msg: 'success'}），需要把泛型改成对应包装结构，取值时取res.data即可。

2. 组件层提取name属性、绑定自动筛选逻辑 #

你需要搭配Angular的响应式表单实现autocomplete的自动筛选，完整组件代码如下：

// COMPONENT FILE
import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';

export class YourComponent {
  // autocomplete绑定的输入框控制器
  locationInput = new FormControl('');
  // 存储后端返回的完整地点数组
  allLocations: LocationItem[] = [];
  // 存储筛选后的name数组，直接给autocomplete渲染用
  filteredLocationNames: string[] = [];

  ngOnInit() {
    // 监听输入框变化，实时筛选匹配的地点名称
    this.locationInput.valueChanges.pipe(
      startWith(''),
      map(inputVal => this.filterLocations(inputVal || ''))
    ).subscribe(filteredNames => {
      this.filteredLocationNames = filteredNames;
    });

    // 初始化拉取所有地点数据
    this.getLocations();
  }

  getLocations(){
    this.locationService.getLocations().subscribe(res => {
      this.allLocations = res;
      // 初始状态下展示所有地点名称
      this.filteredLocationNames = this.allLocations.map(item => item.name);
    })
  }

  // 筛选逻辑：匹配输入值和地点名称，不区分大小写
  private filterLocations(inputVal: string): string[] {
    const filterKey = inputVal.trim().toLowerCase();
    return this.allLocations
      .map(item => item.name)
      .filter(name => name.toLowerCase().includes(filterKey));
  }
}

3. 模板绑定autocomplete组件 #

以Angular Material的autocomplete为例，模板写法如下：

<input type="text" placeholder="请输入地点" [formControl]="locationInput" [matAutocomplete]="locationAuto">
<mat-autocomplete #locationAuto="matAutocomplete">
  <mat-option *ngFor="let name of filteredLocationNames" [value]="name">
    {{ name }}
  </mat-option>
</mat-autocomplete>

常见报错排查 #

• 取name为undefined：先打印res确认结构，是否数组层级和你预期一致，有没有后端多包了一层结构
• pipe操作符报错：确认已经从rxjs/operators路径引入了用到的map、startWith操作符

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