动态设置ag-Grid的属性 [英] Dynamically Setting Properties for ag-Grid

问题描述

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

I am having an issue with dynamically changing properties for ag-Grid.

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

I have created a plunker to demonstrate the issue (see link below).

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

I created 4 buttons. Each button updates a single grid property (sideBar, enableFilter, enableSorting, and suppressMenuHide specifically).

每个按钮将为其 click事件调用函数以进行切换将它们各自的属性设置为 true 或 false 。

Each button will call a function for their 'click' event to toggle their respective property to true or false.

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

The unexpected behavior I am seeing is that toggling the sideBar and enableFilter properties properly update the UI to show/hide sidebar and filtering respectively. However toggling enableSorting and suppressMenuHide do not update the 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

推荐答案

当我在 this.gridApi.refreshHeader（）; 添加到 toggleMenuHide（）和 toggleSorting（）

如果您动态更新上的任何属性，则需要执行此操作标头。

I played around with your plunker and got it working when I added this line this.gridApi.refreshHeader(); to toggleMenuHide() and toggleSorting()
You need to do this if you dynamically update any property on the header.

从文档中-

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

refreshHeader() Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed.

这篇关于动态设置ag-Grid的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！