ngx-datatable - 编辑单元格并弹出一个新按钮以保存更改

Question

我正在使用 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，当我单击“编辑”时，“名称”单元格变得可编辑。我目前必须移开或单击表格的另一个区域以使单元格不可编辑。当我编辑单元格时，“编辑”按钮仍保留在屏幕上，“保存”和“取消”按钮均不出现。

我正在尝试使用带有“编辑”按钮的方法来显示“保存”和“取消”按钮。新行如下：

<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，但我确信这不是它的作用。这如何使名称单元格可编辑？名字前面的减号有什么作用？有没有更好的方法来做我想做的事情？

谢谢！

Answer 1

我正在寻找与您的问题相关的东西，我做了这个 演示。

该表有一个铅笔图标，用于在单行上启用编辑模式。启用后，会出现 2 个图标（保存/删除）。请注意，在我的情况下，我不需要双击进行编辑。

我希望这可以帮助你。