PrimeNG 数据表不可编辑

Question

您好，我正在尝试将 primeNG 用于数据table，但输出只是一个基本的 table，没有应用任何属性。组件：

import { Component } from '@angular/core';
import {AccordionModule} from 'primeng/primeng';     //accordion and accordion tab
import {MenuItem} from 'primeng/primeng';  
import {DataTableModule} from 'primeng/components/datatable/datatable';
import {SharedModule} from 'primeng/primeng';
import { sampleProducts } from './products';

@Component({
  selector: 'data-grid',
  templateUrl: './data-grid.html'
})
export class DataGridComponent {
  private data: any[] = sampleProducts;
}

模板：

<p-dataTable [value]="data" [editable]="true">
<p-column field="PayScaleArea" header="PayScaleArea"></p-column>
<p-column field="PayScaleTypeCode" header="PayScaleTypeCode" [sortable]="true"></p-column>
<p-column field="MeritPercentage" header="MeritPercentage" [sortable]="true"></p-column>
<p-column field="CreatedBy" header="CreatedBy"></p-column>
<p-column field="CreatedDate" header="CreatedDate"></p-column>

app.module:

    import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {AccordionModule} from 'primeng/primeng';     //accordion and accordion tab
import {MenuItem} from 'primeng/primeng';  
import {DataTableModule} from 'primeng/components/datatable/datatable';
import {SharedModule} from 'primeng/primeng';
import { DataGridComponent } from './data-grid.component';


@NgModule({
   bootstrap:    [AppComponent],
   declarations: [AppComponent,DataGridComponent],
   imports:      [BrowserModule, BrowserAnimationsModule, AccordionModule,DataTableModule,SharedModule]
})
export class AppModule {
}

输出：看起来很正常 table。设置中是否缺少任何内容。

Answer 1

您是否也尝试将列设置为可编辑？喜欢：

 <p-column field="PayScaleArea" header="PayScaleArea" [editable]="true"></p-column>

Answer 2

你还有问题吗？

我用你的代码创建了这个 Plunker，我刚刚为每个 p-column 添加了 [editable]="true"，一切似乎都正常（排序和编辑数据），不是吗？

<p-dataTable [value]="data" [editable]="true">
  <p-column field="PayScaleArea" header="PayScaleArea" [editable]="true"></p-column>
  <p-column field="PayScaleTypeCode" header="PayScaleTypeCode" [sortable]="true" [editable]="true"></p-column>
  <p-column field="MeritPercentage" header="MeritPercentage" [sortable]="true" [editable]="true"></p-column>
  <p-column field="CreatedBy" header="CreatedBy" [editable]="true"></p-column>
  <p-column field="CreatedDate" header="CreatedDate" [editable]="true"></p-column>
</p-dataTable>

PrimeNG 数据表不可编辑

PrimeNG datatable not editable

angular

primeng

primeng-datatable