DevExpress针对Angular2和预选的DevExtreme

Question

我正在使用DevExpress的DevExtreme和Angular2。我有一个数据网格(见下图)，它列出了一些状态，并要求用户选择一些状态。有可能某些状态已经存储在数据库中。如何设置之前选择的状态？我可以在文档中看到我应该使用dataGrid.instance.selectRows(arrayOfPreviouslySelectedStates)，但是在我尝试设置dataGrid之后，它被实例化了，它在ngOnInit()中。

我的HTML网格：

<dx-data-grid #statesGrid id="statesContainer" [dataSource]="states" [selectedRowKeys]="[]" [hoverStateEnabled]="true" [showBorders]="true" [showColumnLines]="true" [showRowLines]="true" [rowAlternationEnabled]="true">
    <dxo-sorting mode="multiple"></dxo-sorting>
    <dxo-selection mode="multiple" [deferred]="true"></dxo-selection>
    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[5, 10, 20]" [showInfo]="true"></dxo-pager>
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxi-column dataField="abbreviation" [width]="100"></dxi-column>
    <dxi-column dataField="name"></dxi-column>
</dx-data-grid>

我的组件网：

import 'rxjs/add/operator/switchMap';
import { Component, OnInit, ViewContainerRef, ViewChild } from '@angular/core';
import { CompanyService } from './../../../shared/services/company.service';
import { StateService } from './../../../shared/services/state.service';
import notify from 'devextreme/ui/notify';
import { DxDataGridModule, DxDataGridComponent } from 'devextreme-angular';

@Component({
  selector: 'app-company-detail',
  templateUrl: './company-detail.component.html'
})
export class CompanyDetailComponent implements OnInit {
  @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;

  companyStates: Array<ICompanyState>;
  states: Array<IState>;

  constructor(private CompanyService: CompanyService, private StateService: StateService) { }

  ngOnInit() {
    this.StateService.getStates().subscribe((states) => {
        this.getSelectedStates();
        this.states = states
    });
  }

  public getSelectedStates = (): void => {
      this.CompanyService.getStates(id).subscribe((states) => {
        let preselectedStates: Array<IState> = this.companyStates.map((state) => {
            return { abbreviation: state.Abbreviation, name: state.Name }
        });

        // I get an error here that says that dataGrid is undefined.
        this.dataGrid.instance.selectRows(preselectedStates, false);
      }
  }
}

Answer 1

感谢@yurzui的评论，我能够通过以下方式解决我的问题。[selectedRowKeys]处理所有的预选。它的“问题”在于，当做出额外的选择时，它不会自动更新。所以，我监听了onSelectionChanged，并将事件传递给我的自定义函数，该函数更新selectedStates，然后当单击保存按钮时，我用它将数据保存到数据库中。

从数据库中获取预先选择的状态

public getCompanyStates = (): void => {
    this.CompanyService.getStates().subscribe((states) => {
        this.selectedStates = states;
    });
}

事件处理程序

public onSelectionChanged = (e): void => {
    this.selectedStates = e.selectedRowKeys;
}

HTML的dx数据网格部分

<dx-data-grid #statesGrid id="statesContainer" 
    (onSelectionChanged)="onSelectionChanged($event)" 
    [selectedRowKeys]="selectedStates"
    [dataSource]="states">
    ...
</dx-data-grid>