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。