Angular中如何将API返回数据正确填充至mat-select下拉选项并正常显示

现有代码问题 #

• data1 数组仅声明未初始化，直接调用push方法会触发运行时错误
• 模板中遍历的是原始接口返回数组TestArrList，没有使用你处理后的目标数据，且取值的属性名大小写错误（接口返回的是Name/Value，不是小写的name/value）
• 数据提取逻辑未做筛选，你把所有Items下的字段名都存进去了，没有过滤出Name为test的对应值

修正方案 #

第一步：调整TypeScript逻辑代码 #

import { FormControl } from '@angular/forms; // 没导入FormControl的话先补导入

TestArrList:any[]=[];
// 初始化数组，存储处理后的下拉选项
data1: {label: string, value: string}[] = [];
testControl = new FormControl(); // 确保formControl已声明

ngOnInit(): void {
  let uri = 'APIURL';
  this.http.get(uri).subscribe((data:any) => {  
    this.TestArrList = data;
    // 每次请求重置数组，避免重复累加
    this.data1 = [];
    // 遍历接口数据，筛选Name为test的字段
    for(let i = 0;i < this.TestArrList.length;i++) {
      const targetItem = this.TestArrList[i].Items.find((item:any) => item.Name === 'test');
      if(targetItem) {
        this.data1.push({
          label: targetItem.Value,
          value: targetItem.Value
        });
      }
    }
  }); 
}

第二步：调整模板代码 #

遍历处理完成的data1数组渲染选项：

<mat-grid-tile [colspan]="fieldColspan">
  <mat-form-field class="form-field" appearance="outline" style="width:20vw">
    <mat-label>Location </mat-label>
    <mat-select placeholder ="Select test"  [formControl]="testControl">
      <mat-option *ngFor="let item of data1"  [value]="item.value">
        {{item.label}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</mat-grid-tile>

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