1. 准备工作-添加FormsModule和ReactiveFormsModule 在 app.module.ts 中导入FormsModule和ReactiveFormsModule模块，以确保您的响应式表单可以使用 select 下拉菜单。

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

@NgModule({ imports: [ FormsModule, ReactiveFormsModule, ... ], ... })

2. 声明选项数组 在组件中声明一个变量并定义一个选项数组，这将决定下拉菜单的选项列表。在我们的例子中，我们需要显示一个列表，其中包含一些密码强度选项。然后，我们将在 HTML 模板中使用这个选项数组来渲染下拉菜单。

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

@Component({ selector: 'app-password', template:

strengths = [ { name: 'Weak', value: 'weak' }, { name: 'Medium', value: 'medium' }, { name: 'Strong', value: 'strong' } ]; }

3. 在HTML中添加下拉菜单 在 HTML 模板中，使用“ *ngFor”指令循环遍历 strengths 数组，并使用“ value”属性设置下拉菜单中每个选项的值。请注意，我们将密码强度选项的值设置为对应的值。