Angular 2:如何在 angular 2 中制作我自己的自定义 KendoGrid [英] Angular 2 : How to make my own custom KendoGrid in angular 2
问题描述
我有 4 个组件.我使用 KendoGrid 来显示所有四个组件中的数据.但是现在,我不想在所有四个组件中都使用设置 KendoGrid.为此,我创建了一个子组件,在其中设置 KendoGrid 并从父组件传递数据.我的子组件如下:
ChildComponent.ts :
@Component({选择器:我的剑道网格",模板:`<kendo-grid [data]="dataVal"><模板 ngFor [ngForOf]="myArr" let-column ><kendo-grid-column field="{{column}}" title="{{column}}" ><模板kendoCellTemplate let-dataItem><div>{{dataItem}}</div>模板></kendo-grid-column>模板></kendo-grid>导出类 ChildComponent 实现 OnInit {@Input() dataVal:any;//从父组件获取dataVal值myArr=[];ngOnInit({this._usersService.getUsers().subscribe((userResponse: any)=> {for (var key in userResponse[0]) {this.myArr.push(key);}返回 this.myArr;//在 Kendogrid 模板中绑定 'myArr',它正在制作 kendogrid 标头});}})}
我的一个父组件看起来像:
ParentComponent.html :在此,我在 gridView 中传递对象数组.
<my-kendo-grid [dataVal]="gridView"></my-kendo-grid>
现在项目的输出是:
标题正确,但在值的位置,我得到了一个对象.
https://i.stack.imgur.com/L1RZt.png
请让我知道我在这里做错了什么.
您在单元格值中获取 [object Object] 因为您不打算访问值,您必须编写如下代码:
{{dataItem [column]}}
而且您没有从主数据源中过滤任何列,因此您不需要列数组.您可以加载包含所有列的网格.
从父组件绑定:
<gridView [height]="500" [dataSource]="dataSource"></gridView>
(1) 包含所有列:
@Input() height: number = 400;@Input() 数据源:any = null;ngOnChanges(更改:任何){if (changes.dataSource != null && changes.dataSource.currentValue != null) {this.SetDataSource();}}设置数据源(){如果(this.dataSource != null){}}
HTML:
<kendo-grid [data]="dataSource"[可滚动]="'可滚动'"[高度]="高度"[可选]="真"[sortable]="{ mode: 'multiple' }"></kendo-grid>
(1) 使用配置的列数组(根据您的实现):
@Input() height: number = 400;@Input() 数据源:any = null;公共列:any = [];ngOnChanges(更改:任何){if (changes.dataSource != null && changes.dataSource.currentValue != null) {this.SetDataSource();}}设置数据源(){如果(this.dataSource != null){this.SetColumns();}}SetColumns(): 任何 {this.columns = [];如果(this.dataSource != null){让行 = this.dataSource[0];this.columns = this.GetColumns(row);}}protected GetColumns(obj: any): any {让属性:any = [];if (obj != null && typeof obj == "object") {for(obj 中的 var 属性){如果(obj.hasOwnProperty(财产)){如果(属性!= '$type'){让项目:任何= {};item.Name = 属性;item.DisplayFormat = null;item.CanSort = true;item.CanFilter = true;item.DataType = 'String';properties.push(item);}}}}如果(属性!= null)属性.排序();返回属性;}公共 setStyles(): 任何 {让样式 = {'高度':(this.height - 45) + 'px'};返回样式;}
HTML:
<kendo-grid [ngStyle]="setStyles()"[数据]="数据源"[可滚动]="'可滚动'"[高度]="高度"[可选]="真"[sortable]="{ mode: 'multiple' }"><kendo-grid-column *ngFor="let col of columns;let i=index" field="{{col.Name}}" title="{{col.Name}}"[sortable]="col.CanSort"[宽度]="100"><ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex"><div class="gridCell">{{dataItem[col.Name]}}
</ng-模板></kendo-grid-column></kendo-grid>
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
});
}
})
}
And one of my ParentComponent looks Like:
ParentComponent.html : In This, I am passing the array of objects in gridView.
<my-kendo-grid [dataVal]="gridView"></my-kendo-grid>
Now project's output is :
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.
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.
Bind from parent component:
<gridView [height]="500" [dataSource]="dataSource"></gridView>
(1) With All Column:
@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) With Configured Column Array (as per your implementation):
@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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!