是否可以通过 ng-content 或 TemplateRef 或类似的方式嵌入自定义列定义?我一直在通过站点上提供的 Kendo UI Grid plunker 进行测试(http://www.telerik.com/kendo-angular-ui/components/grid/ http://www.telerik.com/kendo-angular-ui/components/grid/) 也Angular2 子组件作为数据 https://stackoverflow.com/questions/36755844/angular2-child-component-as-data/36760027#36760027但无济于事。我也尝试过 ng-content select 但也没有。非常感谢任何帮助,谢谢!
@Component({
selector: 'test-component',
template:
`
<kendo-grid [data]="Data">
<kendo-grid-column></kendo-grid-column>
// ??? // <ng-content kendo-grid-column></ng-content> // [object Object]
// ??? // <kendo-grid-column ng-content></kendo-grid-column> // [object Object]
</kendo-grid>
`
})
export class TestComponent {
@Input() Data: any;
}
@Component({
selector: 'my-app',
template: `
<test-component [Data]="gridData">
<kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230"></kendo-grid-column>
<kendo-grid-column field="Discontinued" width="120">
<template kendoCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
</template>
</kendo-grid-column>
</test-component>
`
})
export class AppComponent { ... }
正如 @rusev 在之前的评论中回答的那样......这对我有用,谢谢!
GridComponent 正在使用ContentChildren
选择定义的列,
这不适用于嵌入。一个可能的解决方法 -plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=预览 http://plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview
这就是从 plunker 中可以看到的答案
import { Component, Input, ContentChildren, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ColumnComponent, GridComponent } from '@progress/kendo-angular-grid';
const resolvedPromise = Promise.resolve(null); //fancy setTimeout
@Component({
selector: 'test-component',
template:
`
<kendo-grid [data]="Data">
</kendo-grid>
`
})
export class TestComponent {
@Input() Data: any[];
@ContentChildren(ColumnComponent) columns;
@ViewChild(GridComponent) grid;
constructor(private cdr: ChangeDetectorRef ) {}
ngAfterContentInit() {
resolvedPromise.then(() => {
this.grid.columns.reset(this.columns.toArray());
});
}
}
@Component({
selector: 'my-app',
template: `
<test-component [Data]="gridData">
<kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
</test-component>
`
})
export class AppComponent { ... }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)