Блог

Когда я нажимаю на ячейку, запускается режим редактирования, но текстовое поле пусто.

Код:

 <p-table  #dt [columns]="_gridDefinitions" [value]="_appointmentGridDataSource"
         [loading]="loading"
         sortMode="multiple"
         selectionMode="multiple" [(selection)]="_selectedAppointments" [metaKeySelection]="true" dataKey="AppointmentId"
         (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)"
         styleClass="p-datatable-sm p-datatable-gridlines"
         [autoLayout]="true">
  <ng-template pTemplate="caption">
    <div class="p-d-flex p-ai-center p-jc-between">
      Terminübersicht
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let gridDefinition of columns" pSortableColumn="{{gridDefinition.PropertyBinding}}">
        {{gridDefinition.HeaderLabel}} <p-sortIcon field="{{gridDefinition.PropertyBinding}}"></p-sortIcon>
      </th>
    </tr>
    <tr>
      <th *ngFor="let gridDefinition of columns" pSortableColumn="{{gridDefinition.PropertyBinding}}">
        <p-calendar (click)="clickOnFilter($event)" (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'Date', 'equals')"
                    [showButtonBar]="true" styleClass="p-column-filter" placeholder="Registration Date" [readonlyInput]="true" dateFormat="dd.mm.yyyy"
                    *ngIf="gridDefinition.FormatAsDate === true"></p-calendar>
        <input pInputText type="text" (click)="clickOnFilter($event)" placeholder="Search by Name" class="p-column-filter"
               (input)="dt.filter($event.target.value, 'RemarkInternal', 'contains')"
               *ngIf="gridDefinition.FormatAsDate === false amp;amp; gridDefinition.HeaderLabel != 'KW' ">

        <p-multiSelect (click)="clickOnFilter($event)" [options]="weekDays" placeholder="All" styleClass="p-column-filter" optionLabel="label"
                (onChange)="onWeekDayChange($event)"
                *ngIf="gridDefinition.FormatAsDate === false amp;amp; gridDefinition.HeaderLabel === 'KW' "></p-multiSelect>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-appointment let-columns="columns">
    <tr [pSelectableRow]="appointment">

      <td *ngFor="let gridDefinition of columns" [ngStyle]="{'text-align': gridDefinition.Center === true ? 'center' : 'left' }" pEditableColumn>

        <span *ngIf="gridDefinition.FormatAsDate === true amp;amp; gridDefinition.Editable === false">{{appointment[gridDefinition.PropertyBinding] | date: 'dd.MM.yyyy'}}</span>
        <span *ngIf="gridDefinition.FormatAsDate === false amp;amp; gridDefinition.Editable === false">{{appointment[gridDefinition.PropertyBinding]}}</span>

        <p-cellEditor *ngIf="gridDefinition.Editable === true">
          <ng-template pTemplate="input">
            <input pInputText type="text"  [(ngModel)]="appointment[gridDefinition.PropertyBinding]">
          </ng-template>
          <ng-template pTemplate="output">
            {{appointment[gridDefinition.PropertyBinding]}}
          </ng-template>
        </p-cellEditor>

      </td>
    </tr>
  </ng-template>
</p-table>
  

Когда я меняю [(ngModel)] на [значение], это работает. Но я думаю, что это не тот путь, которым следует идти в соответствии с официальной документацией. https://www.primefaces.org/primeng/showcase/#/table/edit

Это работает:

     <p-cellEditor *ngIf="gridDefinition.Editable === true">
      <ng-template pTemplate="input">
        <input pInputText type="text" [value]="appointment[gridDefinition.PropertyBinding]">
      </ng-template>
      <ng-template pTemplate="output">
        {{appointment[gridDefinition.PropertyBinding]}}
      </ng-template>
    </p-cellEditor>