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

Question

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

与在您要查找的列菜单中将某列视为可见/隐藏时的功能相同。

这可能吗？

Answer 1

我已经编辑了此hide column的示例，列菜单正常工作，列也隐藏了

示例网址：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");
    }
}

共有三列，第一列被隐藏并显示两列。