Angular 2中如何在点击的行下方插入新行

我来帮你搞定这个问题！你遇到的核心问题是没处理好渲染数组的结构和插入位置的逻辑，直接操作原数据数组容易出现索引混乱或者重复插入的问题，咱们一步步来解决：

第一步：调整组件逻辑，维护渲染专用数组 #

首先不要直接用原values数组来渲染，咱们创建一个专门用于展示的数组（比如displayRows），同时用一个集合记录哪些行已经插入过新行，避免重复操作：

// 你的组件.ts文件代码
import { Component } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  // 原始数据数组（保持不变）
  values = [/* 你的原始数据，比如{id: 1, desc: 'xxx'}这类对象 */];
  // 用于渲染的数组，混合原数据和插入的新行
  displayRows: any[] = [...this.values];
  // 记录已经插入过新行的原数据索引，避免重复插入
  insertedRowIndexes = new Set<number>();

  insertRow(index: number) {
    // 先判断当前行是否已经插入过新行
    if (this.insertedRowIndexes.has(index)) {
      // 如果已插入，就移除对应的新行
      this.displayRows.splice(index + 1, 1);
      this.insertedRowIndexes.delete(index);
    } else {
      // 在当前行的下一个位置插入新行
      // 你可以自定义新行的内容，比如关联原行的id
      const newRow = {
        isInserted: true,
        originalId: this.values[index].id,
        desc: `为ID ${this.values[index].id} 添加的新行`
      };
      // splice(插入位置, 删除数量, 插入内容)
      this.displayRows.splice(index + 1, 0, newRow);
      this.insertedRowIndexes.add(index);
    }
  }

  getTerms(id: number) {
    // 你的原有逻辑
  }
}

第二步：修改模板，区分原行和插入行 #

在模板里通过ng-container区分原数据行和插入的新行，同时控制复选框的选中状态：

<tr *ngFor="let row of displayRows; let i = index">
  <!-- 渲染原始数据行 -->
  <ng-container *ngIf="!row.isInserted">
    <td>
      <label class="checkbox">
        <!-- 根据插入状态设置复选框选中状态 -->
        <input type="checkbox" [checked]="insertedRowIndexes.has(i)" (change)="insertRow(i)">
      </label>
      <a (click)="getTerms(row.id)">{{row.id}}</a>
    </td>
    <td>{{row.desc}}</td>
  </ng-container>

  <!-- 渲染插入的新行 -->
  <ng-container *ngIf="row.isInserted">
    <!-- 用colspan合并列，避免布局错乱 -->
    <td colspan="2">
      <!-- 这里可以放你需要的新行内容，比如输入框、表单等 -->
      {{row.desc}}
      <!-- 示例：添加一个输入框 -->
      <input type="text" placeholder="输入新行内容">
    </td>
  </ng-container>
</tr>

为什么这样做能解决问题？ #

1. 分离原始数据和渲染数据：原values数组保持不变，不会影响你的业务逻辑，displayRows专门负责页面渲染，插入/删除操作都在这个数组里进行。
2. 精准控制插入位置：用splice(index + 1, 0, newRow)直接在当前原行的下一个索引位置插入新行，确保新行紧跟在勾选行的下方。
3. 避免重复操作：insertedRowIndexes集合记录已插入的行索引，既能控制复选框的选中状态，又能防止重复插入或误删除。

如果你的原始数据会动态更新（比如从后端异步获取），记得在数据更新后重新初始化displayRows和insertedRowIndexes，比如在数据请求完成后执行：

this.displayRows = [...this.values];
this.insertedRowIndexes.clear();

内容的提问来源于stack exchange，提问作者Tavish Aggarwal