在 PrimeNG turbotable 中使用下拉菜单作为输入模板答案

【问题标题】：Using dropdown as input template within PrimeNG turbotable在 PrimeNG turbotable 中使用下拉菜单作为输入模板
【发布时间】：2018-03-29 16:24:36
【问题描述】：

我正在使用 PrimeNG TurboTable，我想将 p-dropdown 组件集成到 PrimeNG Turbotable 的输入模板中。问题是当我使用以下代码时，无法将所选元素分配给值表。

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

【问题讨论】：

标签： input primeng primeng-turbotable primeng-dropdowns

【解决方案1】：

这是一个工作示例：

  <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

【讨论】：