如何用TypeScript中API获取的对象数组填充HTML下拉菜单？

原生TypeScript方案（无框架） #

先在HTML中定义下拉菜单：

<select id="targetDropdown"></select>

然后在TypeScript中完成API请求与数据渲染：

// 定义与API返回匹配的数据类型
interface DropdownItem {
  value: string; // 对应option的value属性
  label: string; // 下拉菜单显示的文本
}

// 加载数据并填充下拉菜单的函数
async function populateDropdown() {
  const dropdown = document.getElementById('targetDropdown') as HTMLSelectElement;
  
  try {
    // 发起API请求
    const response = await fetch('/api/your-data-url');
    const items: DropdownItem[] = await response.json();

    // 清空原有选项，避免重复加载
    dropdown.innerHTML = '';

    // 添加默认提示选项（可选）
    const defaultOpt = document.createElement('option');
    defaultOpt.value = '';
    defaultOpt.textContent = '请选择';
    dropdown.appendChild(defaultOpt);

    // 遍历数组生成选项
    items.forEach(item => {
      const option = document.createElement('option');
      option.value = item.value;
      option.textContent = item.label;
      dropdown.appendChild(option);
    });
  } catch (error) {
    console.error('数据加载失败:', error);
    // 失败时显示提示选项
    dropdown.innerHTML = '<option value="">加载失败，请稍后重试</option>';
  }
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', populateDropdown);

Angular框架方案（TypeScript常用场景） #

如果是Angular项目，无需手动操作DOM，直接通过模板指令绑定数据：

组件HTML模板

<select [(ngModel)]="selectedValue">
  <option value="">请选择</option>
  <option *ngFor="let item of dropdownItems" [value]="item.value">
    {{ item.label }}
  </option>
</select>

组件TypeScript代码

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface DropdownItem {
  value: string;
  label: string;
}

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html'
})
export class DropdownComponent implements OnInit {
  dropdownItems: DropdownItem[] = [];
  selectedValue: string = '';

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 调用API获取数据
    this.http.get<DropdownItem[]>('/api/your-data-url')
      .subscribe({
        next: (data) => {
          this.dropdownItems = data;
        },
        error: (err) => {
          console.error('加载选项失败:', err);
        }
      });
  }
}

关键注意事项 #

• 确保TypeScript接口与API返回的对象结构完全匹配，避免类型错误
• 可选添加默认选项，提升用户操作体验
• 必须处理API请求失败的情况，避免下拉菜单处于无响应状态

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