动态设置ag

本文介绍了动态设置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("raw.githubusercontent/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json") .subscribe(data => { this.rowData = data; }); } }

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.