Angular ngFor循环中点击图标仅切换当前项为输入框的实现

你的思路没问题，用循环索引完全可以实现需求，另外还有一种更灵活的方式——给每个timesheet对象绑定独立状态，两种方案都能确保只有点击的那个<td>内的图标切换为输入框，具体实现如下：

方案一：使用循环索引标记当前编辑项 #

1. 组件类中添加状态变量 #

在组件的.ts文件里定义一个变量，用来记录当前正在编辑的索引：

// 初始值设为-1，表示没有正在编辑的项
editingIndex: number = -1;

addOverHrsForTimesheet(timesheet: any, index: number) {
  // 点击时将当前索引设为编辑状态
  this.editingIndex = index;
  // 这里可以添加其他逻辑，比如初始化输入框的值
}

// 可选：完成编辑后重置状态
finishEditing() {
  this.editingIndex = -1;
}

2. 修改模板代码 #

在<td>的循环里，通过*ngIf判断当前索引是否等于editingIndex，来切换显示图标或输入框：

<td *ngFor="let timesheet of task.timesheets; let i = index" class="w-4 position-relative">
   <div class="input-group">
        <input >
        <!-- 根据当前索引判断显示输入框还是图标 -->
        <span *ngIf="i !== editingIndex" class="input-group-text w-30">
          <em class="bi bi-clock-history" (click)="addOverHrsForTimesheet(timesheet, i)"></em>
        </span>
        <span *ngIf="i === editingIndex" class="input-group-text w-30">
          <input type="number" [(ngModel)]="timesheet.overtime" (blur)="finishEditing()">
        </span>
        <span class="input-group-text w-30"><em class="bi bi-chat-right"></em></span>
   </div>
</td>

方案二：给每个timesheet绑定独立状态 #

如果需要支持同时编辑多个项，或者不想依赖索引，这种方案更合适：

1. 初始化timesheet的状态 #

在获取到task.timesheets数据后，给每个对象添加一个状态属性：

// 假设你在获取数据的方法里初始化状态
loadTaskData() {
  // 模拟获取数据
  this.task.timesheets = [/* 你的timesheet数据 */];
  // 给每个timesheet添加编辑状态属性
  this.task.timesheets.forEach(timesheet => {
    timesheet.isEditingOvertime = false;
  });
}

addOverHrsForTimesheet(timesheet: any) {
  // 切换当前timesheet的编辑状态
  timesheet.isEditingOvertime = true;
}

finishEditing(timesheet: any) {
  timesheet.isEditingOvertime = false;
}

2. 修改模板代码 #

直接根据当前timesheet的状态判断显示内容：

<td *ngFor="let timesheet of task.timesheets; let i = index" class="w-4 position-relative">
   <div class="input-group">
        <input >
        <!-- 根据timesheet自身的状态判断显示内容 -->
        <span *ngIf="!timesheet.isEditingOvertime" class="input-group-text w-30">
          <em class="bi bi-clock-history" (click)="addOverHrsForTimesheet(timesheet)"></em>
        </span>
        <span *ngIf="timesheet.isEditingOvertime" class="input-group-text w-30">
          <input type="number" [(ngModel)]="timesheet.overtime" (blur)="finishEditing(timesheet)">
        </span>
        <span class="input-group-text w-30"><em class="bi bi-chat-right"></em></span>
   </div>
</td>

两种方案的核心逻辑都是给每个<td>绑定独立的判断条件，只有点击的那个项会满足条件切换显示，其他项保持原有状态。

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