Question

我在动态更改ag-Grid的属性时遇到问题。

我创建了一个插件来演示该问题（请参见下面的链接）。

我创建了4个按钮。每个按钮都会更新一个网格属性（特别是sideBar，enableFilter，enableSorting和suppressMenuHide）。

每个按钮将为其“点击”事件调用一个函数，以将其各自的属性切换为true或false。

我看到的意外行为是，切换sideBar和enableFilter属性可以正确更新UI，以分别显示/隐藏侧边栏和过滤。但是，切换enableSorting和suppressMenuHide不会更新UI。

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import "ag-grid-enterprise";

@Component({
selector: "my-app",
template: `<button (click)="toggleSidebar()">toggle sidebar</button>
<button (click)="toggleFilter()">toggle filter</button>
<button (click)="toggleSorting()">toggle sorting</button>
<button (click)="toggleMenuHide()">toggle menu hiding</button>
<ag-grid-angular
  #agGrid
  style="width: 100%; height: 100%;"
  id="myGrid"
  [rowData]="rowData"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [sideBar]="sideBar"
  [enableFilter]="enableFilter"
  [enableSorting]="enableSorting"
  [suppressMenuHide]="suppressMenuHide"
  (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
`
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;
  private rowData: any[];

  private columnDefs;
  private defaultColDef;
  private sideBar:boolean = false;
  private enableFilter:boolean = true;
  private enableSorting:boolean = true;
  private suppressMenuHide:boolean = false;

  toggleSidebar(){
    this.sideBar = !this.sideBar;
    console.log('sidebar set to', this.sideBar);
  }

  toggleFilter(){
    this.enableFilter = !this.enableFilter;
    console.log('filtering set to', this.enableFilter);
  }

  toggleSorting(){
    this.enableSorting = !this.enableSorting;
    console.log('sorting set to', this.enableSorting);
  }

  toggleMenuHide(){
    this.suppressMenuHide = !this.suppressMenuHide;
    console.log('menu hide set to', this.suppressMenuHide);
  }

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: "athlete",
        width: 150,
        filter: "agTextColumnFilter"
      },
      {
        field: "age",
        width: 90
      },
      {
        field: "country",
        width: 120
      },
      {
        field: "year",
        width: 90
      },
      {
        field: "date",
        width: 110
      },
      {
        field: "gold",
        width: 100
      },
      {
        field: "silver",
        width: 100
      },
      {
        field: "bronze",
        width: 100
      },
      {
        field: "total",
        width: 100
      }
    ];
    this.defaultColDef = {
      enableValue: true,
      enableRowGroup: true,
      enablePivot: true
    };
  }

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

    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

https://plnkr.co/edit/DyiMUslXbG1f9ppiIQEb?p=preview

Answer 1

当我在this.gridApi.refreshHeader();和toggleMenuHide()和{{1} 如果您动态更新标头上的任何属性，则需要执行此操作。

从文档中-

refreshHeader（）重绘标题。如果列名更改，则很有用，或其他更改列标题显示方式的东西。

动态设置ag-Grid的属性

1 个答案: