PrimeNG数据表不可编辑

嗨我想使用primeNG数据表，但输出只是一个没有应用它的属性的基本表。组件：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 { 
}

输出：看起来像普通的表。设置中是否有任何缺失。

来源

2017-10-13 Harshini

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

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

来源

2017-10-13 12:34:43 Tom

但排序仍然不工作......任何想法为什么？ – Harshini

此外，可编辑属性每行显示2行，一个显示和其他编辑模式，我们如何启用行编辑？ – Harshini

你还有问题吗？

我用你的代码创建了这个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>

来源

2018-02-24 16:14:11 Antikhippe

PrimeNG数据表不可编辑

回答

相关问题