ngx-datatable中*ngIf实现点击行按钮仅显示当前行输入框问题

问题根因 #

你当前使用的singleItem是组件全局作用域的布尔变量，表格所有行的显隐判断都绑定这同一个变量，一旦变量值变更，所有行的显示状态会同步切换，必然出现点一个按钮所有行输入框同时展示的问题。

修复实现 #

核心逻辑是把全局布尔标记改成存储当前激活行的唯一标识（row.id），每一行单独判断自身id是否和激活id匹配，来控制输入框/按钮的显隐。

1. TS 侧代码调整

// 移除原全局布尔变量 singleItem: boolean
// 存储当前显示输入框的行ID，初始为null表示无激活行
activeRowId: string | number = null;

buttonSwitch(rowId: string | number) {
  // 仅记录当前点击行的ID
  this.activeRowId = rowId;
}

// 可选：选择完成后切回按钮状态的方法，不需要可以不加
switchBackToBtn() {
  this.activeRowId = null;
}

2. HTML 模板调整

修正两处*ngIf的判断逻辑，同时修复原按钮传参时多余包数组的问题：

<ngx-datatable
   class="material"
   rowHeight="auto"
   [loadingIndicator]="tableLoading"
   [columnMode]="ColumnMode.force"
   [rows]="rows"
   [headerHeight]="50"
   [footerHeight]="50"
   [limit]="30"
   [selected]="selected"
   [selectionType]="SelectionType.checkbox"
   [selectAllRowsOnPage]="false"
   (select)="onSelect($event)"
   [sorts]="[{prop: 'lastName', dir: 'asc'}]"
 >

<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">

 <ng-select
    *ngIf="activeRowId === row.id"
    [multiple]="true"
    placeholder="Select a single medication to send"
    appendTo="body"
    (change)="onChange($event); switchBackToBtn()"
    [items]="row.medications.items"
    bindLabel="name"
    bindValue="id"
    [(ngModel)]="selectedMedications[row.id]">
 </ng-select>

<div *ngIf="activeRowId !== row.id">
   <p class="btn btn-light" type="button" (click)="buttonSwitch(row.id)">
      Single item 
   </p>
</div>
</ng-template>
</ngx-datatable>

扩展说明 #

如果后续需要支持同时展开多行的输入框，只需要把activeRowId改成数组类型activeRowIds: (string|number)[] = []，点击时把行ID push进数组，判断显隐时用activeRowIds.includes(row.id)即可。

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