如何使用 kendo-grid-column 中的自定义组件为 Angular 复制 kendo 网格中的行

Question

我在剑道网格中处理行时遇到问题。 它的工作绝对不可预测。 有时正常复制行中的所有值，但是当我调用删除行，删除最后一行时，我不知道为什么。 在我看来，有些东西取决于剑道网格列内的组件，它的值设置不正确。

html剑道网格的清单

<kendo-grid [data]="data"
            [scrollable]="true">

  <kendo-grid-column [width]="115">
    <ng-template kendoGridCellTemplate let-dataItem>
      <button kendoButton class="copy" (click)="copy(dataItem)">Copy</button>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column [width]="100">
    <ng-template kendoGridCellTemplate let-dataItem>
      <button kendoButton class="del" (click)="delete(dataItem)">Delete</button>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column title="Department"
                     [width]="250">
    <ng-template kendoGridHeaderTemplate>
      Department<span class="require-icon"></span>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
      <app-department [(ngModel)]="dataItem.orgUnit"
                      [indicator]="isTeamOrgUnitValid(dataItem)">
      </app-department>
    </ng-template>
  </kendo-grid-column>

和部分具有剑道网格逻辑的组件

  get data(): TeamDTO[] {
     return this.priceStructureRequest.teams;
  }


  ngOnInit() {
  }


  delete(row: TeamDTO) {
    if (row) {
      const index = this.data.indexOf(row);
      if (index > -1) {
        this.data.splice(index, 1);
      }
    }
  }

  add() {
    if (!this.priceStructureRequest.teams) {
      this.priceStructureRequest.teams = [];
    }
    this.data.push(new TeamDTO());
  }

  copy(row: TeamDTO) {
    this.data.push(new TeamDTO(row));
  }

应用部门列表

<kendo-combobox #comboBox
                class="w-100"
                [(ngModel)]="model"
                [textField]="'code'"
                [valueField]="'Code'"
                [data]="items"
                [virtual]="virtual"
                [filterable]="true"
                [control-status-indicator]="indicator"
                [popupSettings]="{ width: 300 }"
                [placeholder]="'Department'"
                (ngModelChange)="updateChanges()"
                (filterChange)="onFilterChange($event)">
</kendo-combobox>

export class DepartmentComponent implements OnInit, ControlValueAccessor {

  @Input()
  indicator: ValidationResult;

  @ViewChild('comboBox', { static: false })
  public comboBox: ComboBoxComponent;

  onChange: (_: any) => void = (_: any) => { };
  onTouched: () => void = () => { };
  updateChanges() {
    this.onChange(this.model);
  }

  writeValue(obj: any): void {
    this.model = obj;
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void { }


  private _model: OrgUnitDTO;
  set model(val: OrgUnitDTO) {
    this._model = val;
    if ((!this.items || !this.items.length) && val) {
      this.items = [val];
      this.updateChanges();
      //this.comboBox.focus();
      //this.comboBox.blur();
    }
  };

  get model(): OrgUnitDTO {
    return this._model;
  }


  filterSubscription: Subscription;
  items: OrgUnitDTO[];


  virtual = { itemHeight: 28, pageSize: 10 };

  constructor(
    private readonly miscService: MiscService
  ) { }

  ngOnInit() {
    if (this.model) {

      this.items = [this.model];
    }
  }

  get loading(): boolean {
    return this.comboBox.loading;
  }

  onFilterChange(filter: string) {
    if (this.filterSubscription != null)
      this.filterSubscription.unsubscribe()

    const t = timer(500);


    this.filterSubscription = t.subscribe(async _ => {
      this.comboBox.loading = true;

      try {
        this.items = await this.miscService.getDeparments(filter).toPromise();
      } catch (error) {

      } finally {
        this.comboBox.loading = false;
      }

    });

  }
}