以编程方式隐藏 GridComponent 中的列，使用 Kendo UI for Angular

Question

我正在尝试使用 Kendo UI for Angular 以编程方式将 GridComponent 中的列设置为隐藏，但找不到组件 html 元素上的 [hidden] 属性以外的任何函数或属性。

这与您在我正在寻找的列菜单中将列检查为可见/隐藏时的功能相同。

这可能吗？

Answer 1

我已经编辑了这个隐藏列的示例，列菜单正在工作，列也在隐藏

示例网址 ： https://stackblitz.com/edit/angular-s2rip3?file=app/app.component.ts

您可以访问此处以查看更新示例 https://gvfum8.run.stackblitz.io 和此示例的代码

@Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData" style="height:400px" [columnMenu]="true">
<ng-template ngFor [ngForOf]="columns" let-column>
<kendo-grid-column
field="{{column}}"
[hidden]="hiddenColumns.indexOf(column) > -1"
>
<ng-template kendoGridHeaderTemplate let-dataItem>
{{dataItem.field}}
</ng-template>
</kendo-grid-column>
</ng-template>
</kendo-grid>
`
})
export class AppComponent {
public gridData: any[] = sampleCustomers;
public columns: string[] = [
'CompanyName', 'ContactName', 'ContactTitle'
];
public hiddenColumns: string[] = [];
public restoreColumns(): void {
this.hiddenColumns = [];
}
constructor(){
this.hiddenColumns.push("CompanyName");
}
}

有三列，第一列是隐藏的，显示两列。