PrimeNg DataTable 无法使用 Angular 5
PrimeNg DataTable not working with Angular 5
我正在使用 PrimeNg 数据table,editable 选项为真。我收到以下错误:
错误:
ERROR in Error at D:/Project/ui/src/app/pages/admin/components/dashboard/dashboard.component.html(38,31): ("lumn.isSortab
le" [style]="column.columnStyle?column.columnStyle:{}">
<template [ERROR ->]let-col let-row="rowData" pTemplate="editor">
<textarea *ngIf="column.isEditab")
Error at D:/Project/ui/src/app/pages/admin/components/dashboard/dashboard.component.html(38,39): ("ortable" [style]="colu
mn.columnStyle?column.columnStyle:{}">
<template let-col [ERROR ->]let-row="rowData" pTemplate="editor">
<textarea *ngIf="column.isEditableAsText")
数据表HTML:
<p-dataTable *ngIf="showTable()" [value]="tableConfig.data" [dataKey]="'id'" [rowStyleClass]="highLightUnsavedRow" [lazy]="true" [rows]="10" [paginator]="true" [responsive]="true" [totalRecords]="getTotalRecords()" (onLazyLoad)="onRowEvent($event)" [(selection)]="selectedRows"
(onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" [editable]="true" (onHeaderCheckboxToggle)="onHeaderCheckboxToggle($event)" (selectionChange)="onSelectionChange($event)">
<p-header>Header</p-header>
<p-column *ngIf="tableConfig.isMultiSelect" [style]="tableConfig.multiSelectColStyle?tableConfig.multiSelectColStyle:{'width':'38px'}" selectionMode="multiple"></p-column>
<p-column *ngFor="let column of tableConfig.columns" field="{{column.fieldName}}" header="{{column.columnTitle?column.columnTitle:column.fieldName}}" [filter]="column.isFilterable" [editable]="column.isEditable" [sortable]="column.isSortable" [style]="column.columnStyle?column.columnStyle:{}">
<template let-col let-row="rowData" pTemplate="editor">
<textarea *ngIf="column.isEditableAsText" class="edit-field" [(ngModel)]="row[col.field]" (change)="onTableEditTextBoxChange(row,col.field,row[col.field])"></textarea>
<p-dropdown *ngIf="column.isEditableAsDropDown" class="edit-field" autoWidth="false" [style]="column.editFieldStyle?column.editFieldStyle:{}" [(ngModel)]="row[col.field]" [options]="column.editDropDownOptions"></p-dropdown>
</template>
</p-column>
</p-dataTable>
问题在于以下标签的属性 let-col 和 let-row="rowData":
<template let-col let-row="rowData" pTemplate="editor">
如果我删除这两个属性,构建问题就会消失,但 table 呈现 0 行。
ng-template
必须在 Angular 5
中使用
<ng-template let-col let-row="rowData" pTemplate="editor">
它现在是一个错误,因为它在 angular 4.x
中已弃用
注:
您仍然可以通过将编译器选项中的 enableLegacyTemplate
标志设置为 true
来使用 <template>
,这可以配置为
在main.ts
const compilerOptions: CompilerOptions = {
enableLegacyTemplate: true
};
使用模块中的值作为
platformBrowserDynamic().bootstrapModule(AppModule,compilerOptions)
我正在使用 PrimeNg 数据table,editable 选项为真。我收到以下错误:
错误:
ERROR in Error at D:/Project/ui/src/app/pages/admin/components/dashboard/dashboard.component.html(38,31): ("lumn.isSortab
le" [style]="column.columnStyle?column.columnStyle:{}">
<template [ERROR ->]let-col let-row="rowData" pTemplate="editor">
<textarea *ngIf="column.isEditab")
Error at D:/Project/ui/src/app/pages/admin/components/dashboard/dashboard.component.html(38,39): ("ortable" [style]="colu
mn.columnStyle?column.columnStyle:{}">
<template let-col [ERROR ->]let-row="rowData" pTemplate="editor">
<textarea *ngIf="column.isEditableAsText")
数据表HTML:
<p-dataTable *ngIf="showTable()" [value]="tableConfig.data" [dataKey]="'id'" [rowStyleClass]="highLightUnsavedRow" [lazy]="true" [rows]="10" [paginator]="true" [responsive]="true" [totalRecords]="getTotalRecords()" (onLazyLoad)="onRowEvent($event)" [(selection)]="selectedRows"
(onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" [editable]="true" (onHeaderCheckboxToggle)="onHeaderCheckboxToggle($event)" (selectionChange)="onSelectionChange($event)">
<p-header>Header</p-header>
<p-column *ngIf="tableConfig.isMultiSelect" [style]="tableConfig.multiSelectColStyle?tableConfig.multiSelectColStyle:{'width':'38px'}" selectionMode="multiple"></p-column>
<p-column *ngFor="let column of tableConfig.columns" field="{{column.fieldName}}" header="{{column.columnTitle?column.columnTitle:column.fieldName}}" [filter]="column.isFilterable" [editable]="column.isEditable" [sortable]="column.isSortable" [style]="column.columnStyle?column.columnStyle:{}">
<template let-col let-row="rowData" pTemplate="editor">
<textarea *ngIf="column.isEditableAsText" class="edit-field" [(ngModel)]="row[col.field]" (change)="onTableEditTextBoxChange(row,col.field,row[col.field])"></textarea>
<p-dropdown *ngIf="column.isEditableAsDropDown" class="edit-field" autoWidth="false" [style]="column.editFieldStyle?column.editFieldStyle:{}" [(ngModel)]="row[col.field]" [options]="column.editDropDownOptions"></p-dropdown>
</template>
</p-column>
</p-dataTable>
问题在于以下标签的属性 let-col 和 let-row="rowData":
<template let-col let-row="rowData" pTemplate="editor">
如果我删除这两个属性,构建问题就会消失,但 table 呈现 0 行。
ng-template
必须在 Angular 5
<ng-template let-col let-row="rowData" pTemplate="editor">
它现在是一个错误,因为它在 angular 4.x
中已弃用注:
您仍然可以通过将编译器选项中的 enableLegacyTemplate
标志设置为 true
来使用 <template>
,这可以配置为
在main.ts
const compilerOptions: CompilerOptions = {
enableLegacyTemplate: true
};
使用模块中的值作为
platformBrowserDynamic().bootstrapModule(AppModule,compilerOptions)