angularjs 如何在剑道网格Angular 中获得列配置阵列

kpbpu008 于 2022-10-31 发布在 Angular

关注(0)|答案(2)|浏览(157)

假设我有下面的剑道网格

<kendo-grid-column field="full_name" title="Contact Name" [width]="220">
              <ng-template kendoGridCellTemplate let-dataItem>
                <div
                  class="customer-photo"
                  [ngStyle]="{ 'background-image': photoURL(dataItem) }"
                ></div>
                <div class="customer-name">{{ dataItem.full_name }}</div>
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="job_title" title="Job Title" [width]="220">
            </kendo-grid-column>
            <kendo-grid-column
              field="country"
              title="Country"
              [width]="100"
              [class]="{ 'text-center': true }"
              [resizable]="false"
            >
              <ng-template kendoGridCellTemplate let-dataItem>
                <img class="flag" [src]="flagURL(dataItem)" width="30" />
              </ng-template>
            </kendo-grid-column>

我想做的是得到一个带有列标题和字段名的网格列数组
例如：[{字段：“全名”，职务：“联系人姓名”}，{字段：“职务”，职务：“职务”}];
如何在剑道网格中进行Angular 调整？

angularjs

来源：https://stackoverflow.com/questions/70652367/how-to-get-an-array-of-column-configurations-in-kendo-grid-angular

2条答案

按热度按时间

mgdq6dx11#

您可以使用ViewChild访问网格，然后访问其columns字段：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { GridComponent } from "@progress/kendo-angular-grid";

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid #grid [data]="gridData">
            <kendo-grid-column field="Id" title="ID">
            </kendo-grid-column>
            <kendo-grid-column field="CompanyName" title="Company Name">
            </kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent implements AfterViewInit {
    @ViewChild("grid") grid: GridComponent;

    public readonly gridData = [{
        'Id': 'ALFKI',
        'CompanyName': 'Alfreds Futterkiste',
        'ContactName': 'Maria Anders',
        'ContactTitle': 'Sales Representative',
        'City': 'Berlin'
    }, {
        'Id': 'ANATR',
        'CompanyName': 'Ana Trujillo Emparedados y helados',
        'ContactName': 'Ana Trujillo',
        'ContactTitle': 'Owner',
        'City': 'México D.F.'
    }, {
        'Id': 'ANTON',
        'CompanyName': 'Antonio Moreno Taquería',
        'ContactName': 'Antonio Moreno',
        'ContactTitle': 'Owner',
        'City': 'México D.F.'
    }];

    ngAfterViewInit() {
        const columns = this.grid.columns.map((column) => {
            return {
                field: column.field,
                title: column.title
            };
        });

        console.log(columns);
    }
}

注意：this.grid.columns给你一个QueryList<ColumnBase>类型的对象。ColumnBase类在它的定义中不包含field字段，但是，它确实出现在对象上。我猜this.grid.columns实际上返回一个QueryList<ColumnComponent>类型的对象。ColumnComponent从ColumnBase派生，并且确实包含field字段。