Question

输入按钮-用于将参数发送回存储的proc至   获取新数据。（在演示中，您无需在其中放置任何值）

重新加载按钮-用于根据参数获取新数据。

我需要根据服务数据中的某些条件选择一些行。第一次选择行，但是当我重新加载服务数据时，会先选择行，然后自动取消选择行。请检查下面的矮人。

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

第二次-单击“重新加载”按钮-行被选中，然后不久便被取消选中。

@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

问题是有角度的试图随机绑定属性columndefs和rowdata，因此在调用columndefs之后，所有选定的行都被取消选择。

该问题的解决方案是不要将columndefs和rowdata直接绑定为ag-grid的属性，而是使用gridOptions并使用API设置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（））;

在加载时以编程方式选择农业网格行

1 个答案: