Angular 2:如何在Angular 2中制作自己的自定义KendoGrid

问题描述

我有4个组成部分.我正在使用KendoGrid来显示所有四个组件中的数据.但是现在，我不想在所有四个组件中都设置KendoGrid.为此，我制作了一个子组件，在其中设置KendoGrid并从父组件传递数据.我的孩子部分如下:

I have 4 Components. And I am using KendoGrid for displaying the data in all four components. But now, I dont want to use to setup KendoGrid in all four components. For this, I made a child component in which i am setting up the KendoGrid and passing the data from parent component. My child component is given below:

ChildComponent.ts:

@Component({
    selector:"my-kendo-grid",
    template:`
        <kendo-grid [data]="dataVal">
          <template ngFor [ngForOf]="myArr" let-column >
            <kendo-grid-column field="{{column}}" title="{{column}}" >
              <template kendoCellTemplate let-dataItem>
                <div>{{dataItem}}</div>
              </template>
            </kendo-grid-column>
          </template>   
        </kendo-grid>

export class ChildComponent implements OnInit {
        @Input() dataVal:any;  //taking dataVal value from parent component
        myArr=[];

        ngOnInit({
              this._usersService.getUsers().subscribe((userResponse: any)=> {
                for (var key in userResponse[0]) {
                    this.myArr.push(key);
            }
             return this.myArr; // binding 'myArr' in Kendogrid template which is making the kendogrid header
        });
    }
})
}

我的ParentComponent之一如下:

And one of my ParentComponent looks Like:

ParentComponent.html 在此，我将在gridView中传递对象数组.

ParentComponent.html :In This, I am passing the array of objects in gridView.

<my-kendo-grid [dataVal]="gridView"></my-kendo-grid>

现在项目的输出是:

标题正确显示了，但是在取值的地方，我得到了一个对象.

The headers are coming properly, but in the place of values, i am getting an object.

https://i.stack.imgur.com/L1RZt.png

请让我知道我在做什么错

Please let me know what wrong I am doing here.

推荐答案

您将在单元格值中获取[object Object]，因为您不打算访问值，因此必须编写如下代码:

You are getting [object Object] in cell value because you are not going to access value, you have to code like:

<div>{{dataItem [column]}}</div>

而且您也不会从主数据源中过滤任何列，因此您不需要列数组.您可以使用所有列加载网格.

And also you are not filtering any column from main datasource, so you don't required column array. You can load grid with all column.

来自父组件的绑定:

<gridView [height]="500" [dataSource]="dataSource"></gridView>

(1)具有所有列:

@Input() height: number = 400;
@Input() dataSource: any = null;

ngOnChanges(changes: any) {        
    if (changes.dataSource != null && changes.dataSource.currentValue != null) {
        this.SetDataSource();
    }
}


SetDataSource() {
    if (this.dataSource != null) { 

    }
}  

HTML:

<kendo-grid [data]="dataSource"
            [scrollable]="'scrollable'"
            [height]="height"
            [selectable]="true"
            [sortable]="{ mode: 'multiple' }">   
</kendo-grid>

(1)具有配置的列阵列(根据您的实现):

@Input() height: number = 400;
@Input() dataSource: any = null;

public columns: any = [];

ngOnChanges(changes: any) {        
    if (changes.dataSource != null && changes.dataSource.currentValue != null) {
        this.SetDataSource();
    }
}


SetDataSource() {
    if (this.dataSource != null) { 
        this.SetColumns();
    }
}    

SetColumns(): any {
    this.columns = [];

    if (this.dataSource != null) {
        let row = this.dataSource[0];
        this.columns = this.GetColumns(row);
    }
}

protected GetColumns(obj: any): any {
    let properties: any = [];

    if (obj != null && typeof obj == "object") {
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (property != '$type') {
                    let item: any = {};
                    item.Name = property;
                    item.DisplayFormat = null;
                    item.CanSort = true;
                    item.CanFilter = true;
                    item.DataType = 'String';
                    properties.push(item);
                }
            }
        }
    }

    if (properties != null)
        properties.sort();

    return properties;
}

public setStyles(): any {
    let styles = {
        'height': (this.height - 45) + 'px'
    };  

    return styles;
}

HTML:

<kendo-grid [ngStyle]="setStyles()"
            [data]="dataSource"
            [scrollable]="'scrollable'"
            [height]="height"
            [selectable]="true"
            [sortable]="{ mode: 'multiple' }">   

    <kendo-grid-column *ngFor="let col of columns;let i=index" field="{{col.Name}}" title="{{col.Name}}"
                       [sortable]="col.CanSort"
                       [width]="100">           

        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <div class="gridCell">                   
                {{dataItem[col.Name]}}
            </div>
        </ng-template>
    </kendo-grid-column>

</kendo-grid>

这篇关于Angular 2:如何在Angular 2中制作自己的自定义KendoGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！