Использование раскрывающегося списка в качестве шаблона ввода в турботабле PrimeNG

Я использую 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-dropdowns primeng-turbotable
person Henda Farhani    schedule 29.03.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот рабочий пример:

  <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

person Stephen Pham    schedule 04.04.2018