使用Kendo UI for Angular以編程方式隱藏GridComponent中的列

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");
    }
}

一共有三列，第一列被隱藏並顯示兩列。