Angular2实现动态组件加载：点击表格行替换为编辑组件

看起来你已经搭好了基础结构，核心要解决的是单条记录的编辑状态控制和父子组件间的数据传递问题，我来一步步帮你落地实现：

第一步：给父组件添加精准的编辑状态管理 #

你现在用的全局edit变量会导致点击任意行都显示所有编辑组件，这显然不符合需求。我们需要跟踪当前正在编辑的具体sl对象：

在父组件的.ts文件中添加：

// 存储当前正在编辑的日志条目
currentEditingSl: any = null;

// 点击行时触发，设置当前编辑对象
editLog(type: string, sl: any) {
  this.currentEditingSl = sl;
}

第二步：改造模板，实现行内容与编辑组件的切换 #

修改表格行的模板逻辑，让点击的行隐藏原有数据，替换为编辑组件：

<tr *ngFor="let sl of log.selectedLogs">
  <!-- 非编辑状态：显示原有记录数据 -->
  <td *ngIf="currentEditingSl !== sl">{{sl.field1}}</td>
  <td *ngIf="currentEditingSl !== sl">{{sl.field2}}</td>
  <td *ngIf="currentEditingSl !== sl">{{sl.field3}}</td>
  <td *ngIf="currentEditingSl !== sl">{{sl.field4 | number: '1.2-2'}}</td>
  <td *ngIf="currentEditingSl !== sl" class="text-right">${{sl.field5}}</td>
  
  <!-- 编辑状态：显示编辑组件，占满整行 -->
  <td *ngIf="currentEditingSl === sl" colspan="5">
    <edit-logs 
      [logToEdit]="currentEditingSl"
      (logUpdated)="updateLog($event)"
      (editCancelled)="currentEditingSl = null">
    </edit-logs>
  </td>
</tr>

第三步：配置子组件（edit-logs）接收和传递数据 #

在edit-logs.component.ts中，通过@Input接收要编辑的数据，用@Output通知父组件完成更新或取消编辑：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'edit-logs',
  templateUrl: './edit-logs.component.html'
})
export class EditLogsComponent {
  // 接收父组件传递的待编辑日志对象
  @Input() logToEdit: any;
  
  // 通知父组件更新日志数据
  @Output() logUpdated = new EventEmitter<any>();
  // 通知父组件取消编辑状态
  @Output() editCancelled = new EventEmitter<void>();

  // 保存编辑后的日志
  saveEdit() {
    // 这里可以添加表单验证逻辑
    this.logUpdated.emit(this.logToEdit);
    this.editCancelled.emit();
  }

  // 取消编辑操作
  cancelEdit() {
    this.editCancelled.emit();
  }
}

然后在edit-logs.component.html中实现编辑表单（示例用ngModel，记得在模块中导入FormsModule）：

<div class="edit-form">
  <input type="text" [(ngModel)]="logToEdit.field1" placeholder="Field 1">
  <input type="text" [(ngModel)]="logToEdit.field2" placeholder="Field 2">
  <input type="text" [(ngModel)]="logToEdit.field3" placeholder="Field 3">
  <input type="number" [(ngModel)]="logToEdit.field4" step="0.01">
  <input type="number" [(ngModel)]="logToEdit.field5" step="0.01">
  
  <button (click)="saveEdit()" class="btn btn-primary">保存</button>
  <button (click)="cancelEdit()" class="btn btn-secondary">取消</button>
</div>

第四步：父组件实现数据更新与总计重算 #

回到父组件.ts，添加更新日志的方法，并重新计算总计值：

updateLog(updatedSl: any) {
  // 遍历找到对应的日志条目并更新
  this.logs.forEach(log => {
    const targetIndex = log.selectedLogs.findIndex(s => s === updatedSl);
    if (targetIndex !== -1) {
      // 用扩展运算符创建新对象，确保触发Angular变更检测
      log.selectedLogs[targetIndex] = { ...updatedSl };
    }
  });
  
  // 重新计算totalHrs和totalAmount
  this.recalculateTotals();
  
  // 关闭编辑状态
  this.currentEditingSl = null;
}

// 示例：重新计算总计的方法
recalculateTotals() {
  this.totalHrs = 0;
  this.totalAmount = 0;
  
  this.logs.forEach(log => {
    log.selectedLogs.forEach(sl => {
      this.totalHrs += sl.field4;
      this.totalAmount += sl.field5;
    });
  });
}

关键注意事项 #

• 确保你的模块中导入了FormsModule（使用ngModel时）或ReactiveFormsModule（使用响应式表单时）
• 用不可变更新（比如{ ...updatedSl }）触发Angular变更检测，避免直接修改对象导致视图不刷新
• 如果sl对象有唯一ID，用ID判断当前编辑对象会比直接引用对象更可靠，比如currentEditingId: number，然后判断sl.id === currentEditingId

内容的提问来源于stack exchange，提问作者Aakriti.G