>我正在使用ngx-datatable来创建可以编辑，添加和删除的设置项列表。我想做的是在行尾有一个带有"编辑"按钮的数据行。当我单击编辑按钮时，单元格变得可编辑，并且"保存"和"取消"按钮分别出现在行尾，编辑按钮消失。然后，当您单击"保存"或"取消"按钮时，该单元格将不再可编辑，编辑按钮将再次出现在行上。我正在尝试使用一种方法来处理编辑并切换到"保存"和"取消"按钮。
我的 HTML，没有该方法，如下所示：
<ng-template let-value="value" let-rowIndex="rowIndex" ngx-datatable-cell-template>
<span class="mobile-hidden button-spacing">
<button ion-button small *ngIf="editing != rowIndex" (click)="editing[rowIndex + '-name'] = true">Edit</button>
<button ion-button small *ngIf="editing === rowIndex" (click)="updateValue($event, 'name', rowIndex)">Save</button>
<button ion-button outline small *ngIf="editing === rowIndex">Cancel</button>
</span>
</ng-template>
使用该 HTML，当我单击"编辑"时，"名称"单元格将变为可编辑状态。我目前必须按 Tab 键离开或单击表格的另一个区域以使单元格不可编辑。当我编辑单元格时，"编辑"按钮仍保留在屏幕上，并且"保存"或"取消"按钮均未显示。
我正在尝试使用带有"编辑"按钮的方法，以调出"保存"和"取消"按钮。新行内容如下：
<button ion-button small *ngIf="editing != rowIndex" (click)="storeOldValues(rowIndex)">Edit</button>
然后，我在 TypeScript 文件中创建函数：
storeOldValues(rowIndex) {
this.nameOld = this.rows[rowIndex].name;
this.editing[rowIndex + '-name'] = true;
this.editing = rowIndex;
}
使用该方法后，当我单击"编辑"(该方法的第三行(时，会出现"保存"和"取消"按钮，但我无法实际编辑单元格。问题似乎是同时使用该方法的第二行和第三行，因为当我注释掉第三行时，单元格再次可编辑，但"保存"和"取消"按钮没有出现。
我从 ngx-datatable 演示代码中获得了该方法的第二行，但我真的不明白它是如何工作的。我想知道这是否是我无法让代码工作的部分原因。具体来说，"rowIndex + '-name'"是如何工作的？看起来它只是将字面单词"-name"连接到rowIndex，但我确信这不是它的作用。这如何使名称单元格可编辑？名字前面的减号有什么用？有没有更好的方法来做我想做的事情？
谢谢！
我正在寻找与您的问题有关的东西，我做了这个 演示。
该表有一个铅笔图标，用于在单行上启用编辑模式。启用后，会出现 2 个图标(保存/删除(。请注意，就我而言，我不需要双击进行编辑。
我希望这能帮助你。