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

Question

我在我的角度 2 项目中使用 primeNG 数据表。这很好，它使我的编码更容易，但是我在实现primeng数据表的可编辑性时遇到了问题。它在编辑文本时效果非常好，但在带有下拉列表和输入开关的编辑列中不起作用。我分叉了一个与我的问题相似的 plunkr。

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

在我的 TS 中

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>

现场演示