Using dropdown as input template within PrimeNG turbotable - input

Question

I am using PrimeNG TurboTable and I want to integrate p-dropdown component inside the input template within PrimeNG Turbotable. The problem is when I use the following code, the selected element can not be assigned to the value table.
<ng-template pTemplate="body" let-rowData let-row="rowIndex">
<tr>
<td>{{listRow[row]}}</td>
<ng-container *ngIf="edit">
<td pEditableColumn *ngFor="let col of listCol; let i = index">
<p-cellEditor>
<ng-template pTemplate="input">
<p-dropdown [options]="eltList" [(ngModel)]="rowData[i]"></p-dropdown>
</ng-template>
<ng-template pTemplate="output">
{{rowData[i]}}
</ng-template>
</p-cellEditor>
</td>
</ng-container>
<ng-container *ngIf="!edit">
<td *ngFor="let col of listCol; let i = index">{{rowData[i]}}</td>
</ng-container>
</tr>
</ng-template>

Answer 1

Here's a working example:
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr>
<td [ngStyle]="{'width':'10%'}">{{rowIndex+1}}</td>
<td *ngFor="let col of columns" pEditableColumn [ngSwitch]="col.field">
<div *ngSwitchCase="'color'">
<p-cellEditor>
<ng-template pTemplate="input">
<p-dropdown appendTo="body" [options]="colors" [(ngModel)]="rowData[col.field]" [style]="{'width':'100%'}"></p-dropdown>
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</div>
<div *ngSwitchDefault>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="rowData[col.field]">
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</div>
</td>
</tr>
</ng-template>
Plunker example