Question

您好我尝试将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 {
}

输出：看起来像普通表。设置中是否缺少任何内容。

Answer 1

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

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

Answer 2

你还有问题吗？

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

<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数据表不可编辑

2 个答案: