Angular中通过代码加载select下拉选项不显示，如何解决？

你的问题核心有两点：

1. ngAfterViewInit执行时，父组件传入的@Input() data可能还未就绪（比如异步加载数据的场景），导致遍历空数组，无法添加选项。
2. 直接操作原生DOM不符合Angular响应式数据绑定的设计理念，容易引发视图与数据不同步的问题。

方案一：使用Angular响应式绑定（推荐） #

完全依托Angular模板语法实现，无需手动操作DOM，代码简洁且符合框架规范：

组件代码：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-select-wrapper',
  templateUrl: './select-wrapper.component.html',
  styleUrls: ['./select-wrapper.component.css']
})
export class SelectWrapperComponent {
  @Input() data: Array<{ id: number; name: string }> = [];
}

HTML模板：

<select>
  <option *ngFor="let item of data" [value]="item.id.toString()">{{ item.name }}</option>
</select>

方案二：保留DOM操作并监听输入变化 #

若必须使用原生DOM操作，需实现OnChanges接口监听data的变化，确保数据更新时重新渲染选项：

组件代码：

import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, ElementRef } from '@angular/core';

@Component({
  selector: 'app-select-wrapper',
  templateUrl: './select-wrapper.component.html',
  styleUrls: ['./select-wrapper.component.css']
})
export class SelectWrapperComponent implements AfterViewInit, OnChanges {
  @Input() data: Array<{ id: number; name: string }> = [];
  private selectElement?: HTMLSelectElement;

  constructor(private elRef: ElementRef) {}

  ngAfterViewInit(): void {
    this.selectElement = this.elRef.nativeElement.querySelector('select');
    this.renderOptions();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['data'] && this.selectElement) {
      this.renderOptions();
    }
  }

  private renderOptions(): void {
    if (!this.selectElement || !this.data) return;
    // 先清空现有选项
    this.selectElement.options.length = 0;
    this.data.forEach(element => {
      this.selectElement!.options.add(new Option(element.name, element.id.toString()));
    });
  }
}

HTML模板保持不变：

<select></select>

• 方案一通过*ngFor指令自动响应数据变化，当data更新时，选项会同步更新，无需手动干预DOM。
• 方案二中使用ElementRef获取组件内部的DOM元素（比全局查找更安全），并通过ngOnChanges监听输入数据的变化，确保数据就绪时重新生成选项。

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