angular - 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，当我单击“编辑”时，“名称”单元格将变为可编辑。目前，我必须按 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，但我确信这不是它的作用。这如何使名称单元格可编辑？名字前面的减号有什么用？有没有更好的方法来完成我想做的事情？

谢谢!

Answer 1

我正在寻找与你的问题相关的东西，我做了这个 demo 。

该表有一个铅笔图标，用于在单行上启用编辑模式。启用后，会出现 2 个图标(保存/删除)。请注意，就我而言，我不需要双击进行编辑。

我希望这可以帮助你。