如何解决Ignite UI for Angular - 如何使用代码中的单元格模板
我只是在调查 this grid,并试图从代码中找出如何使用“单元格模板”。
使用他们的 tree-grid-conditional-cell-style-2 示例,我将以下内容...
<ng-template #bodyTemplate igxCell let-val>
<div style="background-color: rgb(50,205,63)">
<span> from template {{val}} </span>
</div>
</ng-template>
<igx-tree-grid igxPreventDocumentScroll
#grid1 [data]="data"
primaryKey="ID" foreignKey="ParentID"
height="350px">
<igx-column *ngFor="let c of columns"
[field]="c.field"
[header]="c.header? c.header : c.field"
[cellStyles]="c.cellStyles"
[bodyTemplate]="c.bodyTemplate">
</igx-column>
</igx-tree-grid>
在我的 TypeScript 代码中
@ViewChild('bodyTemplate',{ read: TemplateRef })
public bodyTemplate: TemplateRef<any>;
...
public ngAfterViewInit() {
this.data = FOODS_DATA();
this.columns = [
{ field: 'ID',header: 'The ID' },{ field: 'Name',bodyTemplate: this.bodyTemplate },// <-- trying to use template
{ field: 'UnitPrice' },{ field: 'AddedDate' },{ field: 'Extra' }
];
没有错误,但未在 UI 中应用模板。
我假设它是我们使用的 bodyTemplate
列属性...
以前有没有人这样做过,也许知道为什么这不起作用?
提前致谢
[更新]
我可以通过在标记中使用 cellTemplate
来使其工作...
<igx-column *ngFor="let c of columns"
[field]="c.field"
[header]="c.header? c.header : c.field"
[cellTemplate]="c.bodyTemplate"> <--------------
</igx-column>
当我试图输入我的列时我没有找到这个,即在我后面的代码中我有 public columns: Partial<IgxColumnComponent>[];
但是 cellTemplate 好像不是 IgxColumnComponent
的成员?
所以不确定为什么会这样(因为它有效)?
解决方法
定义背后的模板和代码都是正确的。 IgxCellTemplateDirective 是 IgxColumnComponent 的 @ContentChild。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。