Angular 8如何实现点击按钮在同行动态添加三级dropdown组

核心修改思路：将原先全局统一维护的下拉组状态，拆分到每一行独立维护，点击新增按钮时仅操作当前行的下拉组数组，完全不影响其他行的渲染与状态。

1. 组件逻辑修改（src/app/app.component.ts） #

重构数据结构，为每一行配置独立的下拉组存储字段：

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

// 单组三级下拉的数据结构
interface LevelGroup {
  level1: string;
  level2: string;
  level3: string;
}

// 单行数据结构
interface RowItem {
  id: number;
  levelGroups: LevelGroup[]; // 每行单独维护自己的下拉组列表
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 三级下拉的选项数据，可替换为实际接口返回值
  level1Options = ['L1-选项1', 'L1-选项2', 'L1-选项3'];
  level2Options = ['L2-选项1', 'L2-选项2', 'L2-选项3'];
  level3Options = ['L3-选项1', 'L3-选项2', 'L3-选项3'];

  // 行数据列表，初始化时每行默认带1组三级下拉
  rows: RowItem[] = [
    { id: 1, levelGroups: [{ level1: '', level2: '', level3: '' }] },
    { id: 2, levelGroups: [{ level1: '', level2: '', level3: '' }] }
  ];

  // 给指定行新增一组三级下拉，仅操作当前行数据
  addLevelGroup(row: RowItem): void {
    row.levelGroups.push({ level1: '', level2: '', level3: '' });
  }
}

2. 模板结构修改（src/app/app.component.html） #

采用双层循环渲染：外层遍历所有行，内层遍历当前行下的所有下拉组，新增按钮绑定当前行实例：

<div class="page-container">
  <!-- 外层循环：渲染每一行 -->
  <div class="row-item" *ngFor="let row of rows">
    <div class="groups-wrap">
      <!-- 内层循环：渲染当前行的所有三级下拉组 -->
      <div class="level-group" *ngFor="let group of row.levelGroups">
        <select [(ngModel)]="group.level1" class="dropdown">
          <option value="" disabled selected>选择Level1</option>
          <option *ngFor="let opt of level1Options" [value]="opt">{{ opt }}</option>
        </select>
        <select [(ngModel)]="group.level2" class="dropdown">
          <option value="" disabled selected>选择Level2</option>
          <option *ngFor="let opt of level2Options" [value]="opt">{{ opt }}</option>
        </select>
        <select [(ngModel)]="group.level3" class="dropdown">
          <option value="" disabled selected>选择Level3</option>
          <option *ngFor="let opt of level3Options" [value]="opt">{{ opt }}</option>
        </select>
      </div>
    </div>
    <!-- 新增按钮仅触发当前行的新增逻辑 -->
    <button class="add-btn" (click)="addLevelGroup(row)">Add Level</button>
  </div>
</div>

3. 依赖配置检查（src/app/app.module.ts） #

如果之前未引入表单模块，需要手动导入FormsModule以支持ngModel双向绑定：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 新增导入
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, FormsModule], // 把FormsModule加入依赖列表
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 样式调整（src/app/app.component.css，可选） #

添加基础样式匹配预期布局：

.row-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e5e7eb;
}
.groups-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.level-group {
  display: flex;
  gap: 8px;
}
.dropdown {
  padding: 6px 12px;
  min-width: 130px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
.add-btn {
  padding: 6px 14px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.add-btn:hover {
  background: #1d4ed8;
}

修改完成后验证：点击任意行的「Add Level」按钮，只会在对应行的下拉区域新增一组三级下拉组件，其他行的下拉数量、已选值完全不会被改动，符合需求预期。

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