Question

我在我的angular 2项目中使用primeNG数据表。它很好，它使我的编码更容易，但我在实现可编辑的primeng数据表时遇到问题。它在编辑文本时非常有效，但在下拉列表和输入开关的编辑列中无效。我分叉了一个与我的问题类似的傻瓜。

<p-dataTable [value]="persons" [editable]="true"  resizableColumns="true" reorderableColumns="true" tableStyleClass="tablePrimeNgClass"> 
  <p-column field="firstName" header="First Name" [editable]="true"></p-column>
  <p-column field="lastName" [editable]="true" header="Last Name"></p-column>
  <p-column field="favoriteColor" [editable]="true"  header="Favorite Color">
     <template let-col let-color="rowData" pTemplate="editor">
        <p-dropdown [(ngModel)]="color[col.field]" [options]="favoriteColors" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
    <template>
</p-column>
<p-column field="registered" [editable]="true" header="Registered">
    <template>
       <p-inputSwitch onLabel="Yes" offLabel="No" [(ngModel)]="registered"></p-inputSwitch>
     </template>
</p-column></p-dataTable>

在我的

中

eexport class AppComponent {
favoriteColors: SelectItem[] = [
   {label:'red', value:'red'},
   {label:'yellow', value:'yellow'},
   {label:'blue', value:'blue'},
   {label:'black', value:'black'},
   {label:'orange', value:'orange'}
   ];

persons: any [] = [
    {"firstName": "paolo","lastName":"revira","registered":false,"favoriteColor": "red"},
    {"firstName": "kenneth","lastName":"santos","registered":true,"favoriteColor": "blue"},
    {"firstName": "chris","lastName":"kenndy","registered":true,"favoriteColor": "black"},
    {"firstName": "bea","lastName":"stewart","registered":false,"favoriteColor": "pink"},
    {"firstName": "khate","lastName":"wislet","registered":false,"favoriteColor": "yellow"},
  ];

ngOnInit() {

}}

如何实现下拉菜单并切换可编辑的primeng数据表？

Answer 1

为了在编辑过程中使用p-dropdown，您的相应对象应该是SelectedItem

类型的对象

<p-column field="favoriteColor.value" [editable]="true"  header="Favorite Color">
           <ng-template let-col let-color="rowData" pTemplate="editor">
              <p-dropdown [(ngModel)]="color.favoriteColor" [options]="favoriteColors"></p-dropdown>
            </ng-template>
</p-column>

<强> LIVE DEMO

Angular 2.实现可编辑的primeng数据表。使用下拉列表编辑列并切换

1 个答案: