在 Kendo 中以编程方式为 Angular 网格生成模板

Question

给定父组件中的列数组：

columns = [
      { field: 'field1', title: 'Title 1', width: '100px' },
      { field: 'field2', title: 'Title 2', width: '200px' },
      { field: 'field3', title: 'Title 3' }
  ];

我可以在 my-table 组件中为 Angular 网格动态构建 Kendo：

@Component({
  selector: 'my-table',
  template: `
          <kendo-grid #grid="kendoGrid" [data]="data">
              <kendo-grid-column
                  *ngFor="let column of columns"
                     field="{{column.field}}"
                     title="{{column.title}}"
                     width="{{column.width}}"
              </kendo-grid-column>
          </kendo-grid>
`
})
export class MyTableComponent {
     @Input() data: any[] = [];
     @Input() columns: any[] = [];
}

我需要以编程方式向 table 添加一个包含按钮的列，该按钮应在其中执行父组件中的功能。

这是 MyTableComponent 应呈现的标记示例：

 <kendo-grid-column>
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
           <button kendoButton (click)="edit(dataItem,rowIndex)" [icon]="'edit'"></button>
       </ng-template>
 </kendo-grid-column>

MyTableComponent 应该从其父级接收 columns 数组中的信息，如下所示：

columns: [ { isButton: true, buttonLabel: 'Edit', callbackFunc: parentFunc } ];

能否在 table 组件中以编程方式生成模板？

Answer 1

这种情况似乎是可能的。您应该在列内添加一个单元格模板，并使用 ngIf 只为按钮列呈现它：

<ng-template *ngIf="column.isButton" kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
    <button kendoButton (click)="column.callbackFunc(dataItem,rowIndex)" [icon]="column.icon">{{ column.buttonLabel }}</button>
</ng-template>

https://stackblitz.com/edit/angular-bzuy99?file=app/app.component.ts

在 Kendo 中以编程方式为 Angular 网格生成模板

Generating templates programmatically in Kendo for Angular grid

kendo-ui

kendo-grid

kendo-ui-angular2