kendoGrid 中的行编辑问题 / Kendo Angular

Question

我正在创建一个 Web 应用程序，我在其中用数据填充了一些 kendoGrid。当我尝试编辑那些 kendoGrids 时，我的问题就出现了。这里有一些图片：

编辑前（方块内我有kendoTextBox）


按左上角'Edit'后

您可以清楚地看到，由于某些奇怪的原因，kendoGrid 获取最后一行 (333) 的值并将其粘贴到网格的所有行中。

现在是写代码的时候了：
debts.component.html

<kendo-grid-column field="ContractNumber" title="Αρ. Σύμβασης" width="200">
    <ng-template *ngIf="!isInEditMode" kendoGridCellTemplate let-dataItem="dataItem">
      {{ dataItem.ContractNumber }}
    </ng-template>
    <ng-template *ngIf="isInEditMode" kendoGridCellTemplate let-dataItem="dataItem" let-formGroup="formGroup">
      <input
        name="ContractNumber"
        [(ngModel)]="dataItem.ContractNumber"
        kendoGridFocusable
        kendoTextBox/>
    </ng-template>
</kendo-grid-column>

当我按下左上角的 'Edit' 按钮时，isInEditMode 会更改值，并且网格会打开所有单元格进行编辑。我认为 [(ngModel)] 有问题，因为即使我在所有行中更改值都会发生变化，但当我再次进入 'Edit' 模式时，最后一行的值将在所有行中发生突出显示的列。

** 只有 kendoTextBox 才会出现此问题。例如，我对 kendoCombobox 或 kendoNumericTextbox 没有任何问题。

任何帮助/建议将不胜感激。

Answer 1

我找到了过去几天困扰我的问题的解决方案。多亏了这个正确的回复 here，我才意识到原来如此简单易行。我只需要在每个输入中有一个唯一的 name。所以，这就是 [(ngModel)] 将我所有列值替换为最后一个的原因。

最后，我设法像这样更改了我的代码：

<ng-template *ngIf="isInEditMode" kendoGridCellTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
   <input
      name="Account{{ rowIndex }}"
      [(ngModel)]="dataItem.Account"
      kendoGridFocusable
      kendoTextBox/>
 </ng-template>

从技术上讲，我在每个 name 中添加了 rowIndex，以便具有必要的唯一性。