PrimeNG 数据表不可编辑答案

【问题标题】：PrimeNG datatable not editablePrimeNG 数据表不可编辑
【发布时间】：2018-02-25 00:14:11
【问题描述】：

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

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 {
}

输出：看起来像普通的桌子。设置中是否缺少任何东西。

【问题讨论】：

标签： angular primeng primeng-datatable

【解决方案1】：

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

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

【讨论】：

还有editable属性每行显示2行，编辑模式一个显示一个，如何启用行编辑？

【解决方案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>

【讨论】：