Angular KendoGrid Row可重新排序，拖放不适用于新添加的行

Question

我有一个带有数据源的 KendoGrid，其中添加了 rowreorder-column 并且设置了 rowReorderable=true。

加载网格后，我可以拖放这些行来更改顺序。但是，当我动态添加一些行时，我无法删除这些行索引。只在前 4 行，因为它们已经在那里了。

这是一个简单的 stackblitz 示例，我在其中复制了该问题：

https://stackblitz.com/edit/angular-5b3vsr?file=src%2Fapp%2Fapp.component.ts

Answer 1

发生此错误似乎是因为您多次推送同一个数组，请记住数组是通过 JavaScript 中的引用存储的，因此即使我们这样做

[...customers]

，也会为数组创建新的引用，而不是数组元素，所以我所做的是，当您再次将相同的元素添加到列表中时，我为数组中的每个元素创建一个新的引用，这似乎消除了当您每次将新的数组元素推入时的错误array 它不会导致这个问题，只是在这种情况下你会遇到这个问题，因为多次推送相同的数组元素。 从 '@angular/core' 导入 { ChangeDetectorRef, Component }; 从 '@progress/kendo-angular-grid' 导入 { GridItem } ； 从'./customers'导入{顾客，sampleCustomers}；

@Component({
  selector: 'my-app',
  template: `
    <button kendoButton (click)="addCustomers()">Add</button>
    <button kendoButton (click)="removeCustomers()">Remove</button>
        <kendo-grid
            [kendoGridBinding]="gridData"
            [rowReorderable]="true"
            [height]="420">
                <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
                <kendo-grid-column field="CompanyName" [width]="260" title="Company Name"></kendo-grid-column>
                <kendo-grid-column field="ContactName" [width]="180" title="Contact Name"></kendo-grid-column>
                <kendo-grid-column field="City" [width]="100"></kendo-grid-column>
                <kendo-grid-column field="ContactTitle" title="Contact Title"></kendo-grid-column>
        </kendo-grid>
    `,
})
export class AppComponent {
  constructor(private cdr: ChangeDetectorRef) {}
  public gridData: unknown[] = customers;

  addCustomers() {
    this.gridData = [
      ...this.gridData,
      ...sampleCustomers.map((x) => ({ ...x })),
    ];
    this.cdr.detectChanges();
  }

  removeCustomers() {
    this.gridData.splice(4, 9);
    this.cdr.detectChanges();
  }
}

堆栈闪电战