Angular中多行动态联动下拉选择框实现问题求助

1. 修复任务获取函数的核心问题 #

你当前的getTasksForProject函数使用filter方法，它返回的是匹配项数组而非单个项目对象，导致project.tasks始终为undefined。改用find方法获取单个项目对象即可解决：

getTasksForProject(projectCode: string): any[] {
  // 用find匹配单个项目，找不到则返回空数组
  const project = this.timecodes.find(proj => proj.code === projectCode);
  return project ? project.tasks : [];
}

2. 完善下拉框双向绑定与联动逻辑 #

需要给下拉框添加[(ngModel)]实现双向数据绑定，确保切换项目时能实时更新任务列表，同时页面加载时自动选中预设值：

项目下拉框修正 #

<th scope="row" class="col-2">
  <select class="form-select" aria-label="Select a project" [(ngModel)]="entry.project">
    <option disabled>[SELECT PROJECT]</option>
    <option [value]="timecode.code" *ngFor="let timecode of timecodes">
      ({{ timecode.code }}) {{ timecode.project }}
    </option>
  </select>
</th>

任务下拉框修正（修复显示错误+绑定选中值） #

<td class="col-2">
  <select class="form-select" aria-label="Select a task" [(ngModel)]="entry.task" [disabled]="!entry.project">
    <option disabled>[SELECT TASK]</option>
    <option [value]="task.code" *ngFor="let task of getTasksForProject(entry.project)">
      ({{ task.code }}) {{ task.name }} <!-- 原代码重复显示code，改为显示任务名称 -->
    </option>
  </select>
</td>

3. 动态添加/删除行的实现 #

组件逻辑 #

// 存储所有时间表条目
timeEntries: any[] = [];

// 初始化时添加默认行
ngOnInit(): void {
  this.addNewEntry();
}

// 新增行
addNewEntry(): void {
  this.timeEntries.push({ project: '', task: '' });
}

// 删除指定行（保留至少一行）
removeEntry(index: number): void {
  if (this.timeEntries.length > 1) {
    this.timeEntries.splice(index, 1);
  }
}

模板结构 #

<table class="table">
  <thead>
    <tr>
      <th scope="col">Project</th>
      <th scope="col">Task</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let entry of timeEntries; let i = index">
      <!-- 项目下拉框 -->
      <th scope="row" class="col-2">
        <select class="form-select" aria-label="Select a project" [(ngModel)]="entry.project">
          <option disabled>[SELECT PROJECT]</option>
          <option [value]="timecode.code" *ngFor="let timecode of timecodes">
            ({{ timecode.code }}) {{ timecode.project }}
          </option>
        </select>
      </th>
      <!-- 任务下拉框 -->
      <td class="col-2">
        <select class="form-select" aria-label="Select a task" [(ngModel)]="entry.task" [disabled]="!entry.project">
          <option disabled>[SELECT TASK]</option>
          <option [value]="task.code" *ngFor="let task of getTasksForProject(entry.project)">
            ({{ task.code }}) {{ task.name }}
          </option>
        </select>
      </td>
      <!-- 删除按钮 -->
      <td class="col-1">
        <button class="btn btn-sm btn-danger" (click)="removeEntry(i)" [disabled]="timeEntries.length === 1">
          Remove
        </button>
      </td>
    </tr>
  </tbody>
</table>

<!-- 新增行按钮 -->
<button class="btn btn-primary mt-3" (click)="addNewEntry()">Add New Row</button>

4. 页面加载自动选中预设值 #

如果初始条目有预设的项目/任务编码，直接在初始化时赋值即可自动选中：

// 示例：初始选中第一个项目的第一个任务
this.timeEntries.push({ project: '123', task: '1' });

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