为何ng-repeat与ng-options未生效？Angular下拉框渲染问题求助

开发者阿泽

2026-6-14

解决Angular中ng-options指令被忽略的问题

问题根源

你使用的ng-options是AngularJS（1.x版本）专属指令，而当前项目是Angular（2+版本）——这两个是完全独立的框架，Angular（2+）不识别AngularJS的指令，所以这些代码会被当作普通HTML属性直接输出。

正确实现方式

以下是Angular（2+）中渲染下拉选择框的两种常用方法：

方法1：使用`*ngFor`直接渲染选项

修改app.component.html代码：

Please pick an option
<select>
  <option *ngFor="let x of myData" [value]="x">{{x}}</option>
</select>

*ngFor是Angular（2+）的迭代指令，用于循环生成DOM元素，和AngularJS的ng-repeat功能类似，但语法不同。

方法2：结合表单控件（适合复杂表单场景）

先修改app.component.ts，引入表单控件：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  myData = ['Yes', 'No'];
  selectControl = new FormControl('');

  constructor() {}

  ngOnInit(): void {}
}

对应修改app.component.html：

Please pick an option
<select [formControl]="selectControl">
  <option *ngFor="let x of myData" [value]="x">{{x}}</option>
</select>

最后在项目的根模块（如AppModule）中导入表单模块：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入模块
    ReactiveFormsModule
  ]
})
export class AppModule { }