Select 以编程方式加载 ag-grid 行

Question

Input button - Is used to send a parameter back to stored proc to fetch new data. (In the demo you don't need to put any value in there)

Reload Button - Is used to fetch new data based on the parameter.

我需要根据服务数据中的某些条件 select 某些行。行第一次得到 selected，但是当我重新加载服务数据时，行得到 selected，然后自动取消 selected。请检查下面的plunker。

第一次 - 单击重新加载按钮 - 网格加载正常。

第二次 - 单击“重新加载”按钮 - 行得到 selected，然后很快被取消selected。

@Component({
  selector: "my-app",
  template: `<div style="height: 100%; padding-top: 35px; box-sizing: border-box;">
    <ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    [rowData]="rowData"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [enableColResize]="true"
    [suppressRowClickSelection]="true"
    [rowSelection]="rowSelection"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
    <input type="Text" placeholder="Param to SP"/>
    <button (click)="reloadData()">ReloadData</button>
</div>`
})

export class AppComponent {
  private gridApi;
  private gridColumnApi;
  private rowData: any[];

  private columnDefs;
  private defaultColDef;
  private rowSelection;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete",
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true
      },
      {
        headerName: "Age",
        field: "age"
      },
      {
        headerName: "Country",
        field: "country"
      },
      {
        headerName: "Year",
        field: "year"
      },
      {
        headerName: "Date",
        field: "date"
      },
      {
        headerName: "Sport",
        field: "sport"
      },
      {
        headerName: "Gold",
        field: "gold"
      },
      {
        headerName: "Silver",
        field: "silver"
      },
      {
        headerName: "Bronze",
        field: "bronze"
      },
      {
        headerName: "Total",
        field: "total"
      }
    ];
    this.defaultColDef = { width: 100 };
    this.rowSelection = "multiple";
  }

  reloadData() {
    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinnersSmall.json")
      .subscribe(data => {
        this.rowData = data;
      });
      this.gridApi.forEachNode(function (node) {
                        node.setSelected(true);
            });
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
}

笨蛋 - https://plnkr.co/edit/fuJ4DBc7Slp8MUTEKolJ?p=preview

Answer 1

问题是 angular 试图以随机顺序单独绑定属性 columndefs 和 rowdata，因此之后调用了 columndefs 并且所有选定的行都被取消选择。

问题的解决方案是不要将 columndefs 和 rowdata 作为属性直接绑定到 ag-grid，而是使用 gridOptions 并使用 API.[=12 设置 columndefs 和 rowdata =]

@Component({
  selector: "my-app",
  template: `<div style="height: 100%; padding-top: 35px; box-sizing: border-box;">
    <ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    [gridOptions]="gridOptions" 
    class="ag-theme-balham"
    [enableColResize]="true"
    [suppressRowClickSelection]="true"
    [rowSelection]="rowSelection"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
    <input type="Text" placeholder="Param to SP"/>
    <button (click)="reloadData()">ReloadData</button>
</div>`
})

this.gridOptions.api.setColumnDefs(this.createParentColumnDefs()); this.gridOptions.api.setRowData(this.createParentRowData());

Select 以编程方式加载 ag-grid 行

Select ag-grid row programmatically on load

ag-grid

ag-grid-ng2