1

我只是在研究这个网格，并试图找出如何使用代码中的“单元格模板”。

使用他们的 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？所以不确定为什么会这样（因为它有效）？

4

1 回答 1

1

定义后面的模板和代码都是正确的。IgxCellTemplateDirective是 IgxColumnComponent的@ContentChild。

于 2021-07-27T08:15:00.247 回答