我正式使用 kedo grid 和 ngx 来显示数据。
有4个文件。kedo.ts 和 kedo.html 用于自定义模板，component.html 和 component.ts 用于使用模板。我试图尽可能简化代码，但数据仍然未定义。
kedo.ts
<kendo-grid
[kendoGridBinding]="gridData"
[formlyAttributes]="field">
<kendo-grid-column
*ngFor="let column of columns"
[field]="to.columns">
<ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
<span [class.special]="column.field === 'CompanyName'"> {{column.field}}({{columnIndex}})</span>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<span [class.special]="column === 'CompanyName'"> {{dataItem[column]}}</span>
</ng-template>
</kendo-grid-column>
</kendo-grid>kedo.ts
export class DatatableFormComponentKendo extends FieldArrayType implements OnInit {
}
private gridData: any[] //= sampleCustomers; if uncoment here in the grid data will be displayed.
constructor() {
super();
}组件.ts
private gridData: any[] = sampleCustomers;
public columns: any[] = [{ field: 'ProductName', title: 'Name'}, { }];
fieldsTable: FormlyFieldConfig[] = [{
key: 'gridData',
type: 'datatable-kendo',
templateOptions: {
column: [
{ field: 'actions'},
{ field: 'id'},
],
}组件.html
<form [formGroup]="form" (ngSubmit)="onSubmitForm(data)" class="py-3">
<formly-form [model]="modelTable" [fields]="fieldsTable" [options]="options" [form]="form">
</formly-form>
</form>