如何在ngFor循环行中单独切换被点击的图标？

问题出在你当前用的clickState.clicked是一个全局共享的状态变量——所有行都会读取这个值，所以点击任意一行会触发所有行的图标切换。要实现仅当前行切换，我们需要给每一行维护独立的点击状态，具体步骤如下：

步骤1：在组件类中添加行状态存储 #

在你的组件.ts文件里，定义一个对象来保存每行的点击状态，用每行的唯一标识（比如row.dbColumn1或者rowIndex）作为键：

// 组件类内的属性
rowClickedStates: { [uniqueKey: string]: boolean } = {};

如果row.dbColumn1不是唯一值，也可以用rowIndex作为键，确保每行有唯一的标识即可。

步骤2：修改模板中的状态判断与点击事件 #

把模板里的全局状态替换为对应行的独立状态，同时更新点击事件的逻辑：

<ng-template #clickState let-rowIndex="rowIndex" let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
  <strong>{{row.dbColumn1}}</strong>
  <!-- 未点击时显示的图标 -->
  <i 
    class="fa fa-external-link" 
    style="float:right;padding-top: 4px; vertical-align:bottom"
    *ngIf="!rowClickedStates[row.dbColumn1]"
    (click)="rowClickedStates[row.dbColumn1] = true; onVisible($event,row.dbColumn1,row,rowIndex)"
  ></i>
  <!-- 点击后显示的图标（可选，根据需求调整） -->
  <i 
    class="fa fa-check" 
    style="float:right;padding-top: 4px; vertical-align:bottom"
    *ngIf="rowClickedStates[row.dbColumn1]"
  ></i>
</ng-template>

如果需要支持点击切换（点一次显示，再点一次隐藏），可以把点击事件里的赋值改成取反：

(click)="rowClickedStates[row.dbColumn1] = !rowClickedStates[row.dbColumn1]; onVisible($event,row.dbColumn1,row,rowIndex)"

关键说明 #

• 我们用row.dbColumn1作为每行的唯一标识，确保每个行的状态独立存储，不会互相干扰
• 模板里通过*ngIf判断当前行的状态，只渲染对应状态的图标
• 点击事件只更新当前行对应的状态，完全不会影响其他行的显示

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