如何将记录从angular6中的一个网格推到另一个网格

Question

我有两个网格，一个是dataListGridData和alldataListGridData，在两个网格中，我现在都有一个网格，我已经删除了数据，另外一个我必须添加按钮，如果单击删除数据应用于alldataListGridData网格，并且单击添加按钮选择的记录应推送到dataList网格。请在将记录插入表格的过程中帮助我。

export class SaveObjectComponent implements OnInit {
  public dataListGridData: GridDataResult;
  public alldataListGridData: GridDataResult;
  principleId: string;
  dataId: any;
  dataList: any[] = [];
  alldataList: any[] = [];
  sort: SortDescriptor[] = [{
    field: 'name',
    dir: 'asc'
  }];
  state: State = {
    skip: 0,
    take: 0,
    sort: [{
      field: 'name',
      dir: 'asc'
    }]
  };
  public stateAll: State = {
    skip: 0,
    take: 0,
  };

  constructor(private dataservice: DataService) {
    this.dataId = 'aabb2b4a-bfa6-4ca4-a911-8d89dca7a575';
  }


  ngOnInit() {
 
    this.refresh();
  }
  
  async refresh() {
    this.updatedSearchesList = [];
    const search = await this.worksheetService.getAvailableSearches(this.dataId, this.principleId);
    if (!search.hasError && search.result) {
      this.dataList = search.result;
      this.dataListGridData = {
        data: this.dataList.slice(this.state.skip, this.state.take),
        total: this.dataList.length
      };
    }
    if (this.dataList.length > 0) {
      this.dataList.forEach(element => {
        this.updatedSearchesList.push(element.resourceId);
      });
    }
    this.getAvailableSearch();
  }

  async getAvailableSearch() {
    console.log(this.principleId);
    const allSearch = await this.worksheetService.getAvailableSearches(this.worksheetId, this.principleId);
    console.log(allSearch);
    this.alldataList = allSearch.result;
    this.alldataListGridData = {
      data: this.alldataList.slice(this.stateAll.skip, this.stateAll.take),
      total: this.alldataList.length
    };
  }
  onRemoveRowClicked(object: any) {
    debugger;
    console.log(object);
    const objectIndex = this.dataList.indexOf(object.resourceId);
    console.log(objectIndex);
    if (objectIndex === -1) {
      object.isClicked = true;
      this.dataList.splice(objectIndex);
      console.log( this.dataList.splice(objectIndex));
    } else {
      object.isClicked = false;
      this.dataList.push(object);
    }
  }
  onAddRowClicked(rowAdd: any) {
    console.log(rowAdd);
    const objectIndex = this.a.indexOf(rowAdd);
    if (objectIndex === -1) {
      rowAdd.isClicked = true;
      this.alldataList.push(rowAdd);
      this.alldataListGridData = null;
      this.alldataListGridData = {
        data: rowAdd.splice(this.stateAll.skip, this.stateAll.take),
        total: rowAdd.length
      };
      console.log(this.alldataList);
    } else {
      rowAdd.isClicked = false;
      this.alldataList.splice(objectIndex, 1);
    }
  }
  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.dataListGridData = process(this.dataList, this.state);
  }
  public dataStateChanges(state: DataStateChangeEvent): void {
    this.state = state;
    this.alldataListGridData = process(this.alldataList, this.stateAll);
  }
  public sortChange(sort: SortDescriptor[]): void {
    this.sort = sort;
  }
  public sortChanges(sort: SortDescriptor[]): void {
    this.sort = sort;
  }

  
}

<kendo-grid [data]="worksheetGridData" [filter]="state.filter" filterable="menu" [sortable]="true" [sort]="sort"
      (sortChange)="sortChange($event)" (dataStateChange)="dataStateChange($event)" 
       [resizable]="true" [scrollable]="'scrollable'" [height]="300">
      <kendo-grid-column field="name" title="Object Name" [width]="165">
      </kendo-grid-column>
      <kendo-grid-column field="categoryName" title="Category" [width]="150">
      </kendo-grid-column>
      <kendo-grid-command-column title="Remove" width="80">
        <ng-template kendoGridCellTemplate let-dataItem>
          <button mat-icon-button color="primary" (click)="onRemoveRowClicked(dataItem)" [ngClass]="{'selectedRemoveButton': dataItem.isClicked}">
            <mat-icon>remove_circle</mat-icon>
          </button>
        </ng-template>
      </kendo-grid-command-column>
    </kendo-grid>





<kendo-grid [data]="recentWorksheetGridData" [filter]="state.filter" filterable="menu" [sortable]="true" [sort]="sort"
      (sortChange)="sortChanges($event)" (dataStateChange)="dataStateChanges($event)"
       [resizable]="true" [scrollable]="'scrollable'" [height]="300" >
      <kendo-grid-column field="name" title="Object Name" [width]="165">
      </kendo-grid-column>
      <kendo-grid-column field="categoryName" title="Category" [width]="150">
 
      <kendo-grid-command-column title="Add" width="80">
        <ng-template kendoGridCellTemplate let-dataItem>
          <button mat-icon-button color="primary" (click)="onAddRowClicked(dataItem)" [ngClass]="{'selectedAddButton': dataItem.isClicked}">
            <mat-icon>add_circle</mat-icon>
          </button>
        </ng-template>
      </kendo-grid-command-column>
    </kendo-grid>

Answer 1

请记住，网格本身只是提供数据的UI组件，它们不保存数据。因此，您实际上并没有将行从一个网格移动到另一个网格，而是将其从支持一个数组的数据结构移动到了支持另一个网格的数据结构，然后两个网格将重新+呈现更改的数据。 / p>

因此，您需要编写代码来在“ worksheetGridData”和“ recentWorksheetGridData”结构之间移动数据。