Angular 2. 实现可编辑的primeng数据表。使用下拉菜单和开关编辑列答案

【问题标题】：Angular 2. Implementing editable primeng data table. Edit column with dropdown and switchAngular 2. 实现可编辑的primeng数据表。使用下拉菜单和开关编辑列
【发布时间】：2017-10-11 04:49:41
【问题描述】：

我在我的 Angular 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数据表中实现下拉和切换？

【问题讨论】：

标签： angular typescript primeng

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

【讨论】：