angular - Prime NG 的可编辑表格上的奇怪行为

Question

当我尝试编辑 Prime NG 的可编辑行上的某些行时遇到了一个奇怪的问题

如果我们查看下面的网格，我们可以看到所有行都有不同的值:

如果我编辑第一行，显然没有问题:

但是，如果我尝试一次编辑多行，它们将以相同的值出现:

仅当网格位于 p-dialog 标记内时才会出现此问题。

<!-- Header do modal tem uma tabela-->
        <p-table [value]="equipmentClass.propertyValuesList" dataKey="equipmentClassPropertyValueId"
          editMode="row" [paginator]="true" [rows]="4" pageLinkSize="4">
          <ng-template pTemplate="header" let-columns>
            <tr>
              <th>Propiedad</th>
              <th>Tipo del Valor</th>
              <th>Valor</th>
              <th>Unidad de Medida</th>
              <th style="width:10em">Acción</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="emptymessage" let-columns>
            <tr>
             <td [attr.colspan]="5" class="text-center">No se encontrarón registros</td>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-editing="editing" let-index="rowIndex">
            <tr [pEditableRow]="rowData" *ngIf="!rowData?.isDeleted">
              <td>
                <p-cellEditor>
                  <ng-template pTemplate="input">
                    <div>
                      <p-dropdown dataKey="equipmentPropertyId" name="equipmentProperty" [options]="equipmentProperties" [(ngModel)]="rowData.equipmentProperty" optionLabel="name" appendTo="body" ></p-dropdown>
                    </div>
                  </ng-template>
                  <ng-template pTemplate="output">
                    {{rowData.equipmentProperty?.name}}
                  </ng-template>
                </p-cellEditor>
              </td>
              <td>
                <p-cellEditor>
                  <ng-template pTemplate="input">
                    <p-dropdown dataKey="dataTypeId" name="dataType" (onChange)="loadCustomProps();" [options]="dataTypes" [(ngModel)]="rowData.dataType" optionLabel="name"
                     appendTo="body"></p-dropdown>
                  </ng-template>
                  <ng-template pTemplate="output">
                    {{rowData.dataType?.name}}
                  </ng-template>
                </p-cellEditor>
              </td>
              <td>
                <p-cellEditor>
                  <ng-template pTemplate="input">
                    <div *ngIf="!rowData.equipmentProperty?.expression">
                      <div *ngIf="rowData.dataType?.name.toUpperCase() != 'IMAGEN'">
                        <div *ngIf="!rowData.dataType?.isEntity">
                            <div *ngIf="rowData.dataType?.name != 'DATETIME'">
                                <input *ngIf="rowData.dataType?.name != 'INTEGER' && rowData.dataType?.name != 'DECIMAL'" pInputText id="value" placeholder="Valor" 
                                [(ngModel)]="rowData.value" [disabled]="disabled" name="value" />
                                <input *ngIf="rowData.dataType?.name == 'INTEGER' || rowData.dataType?.name == 'DECIMAL'" pInputText id="value" placeholder="Valor" 
                                [(ngModel)]="rowData.value" [disabled]="disabled" name="value" pKeyFilter="num" />
                            </div>
                            <div *ngIf="rowData.dataType?.name  == 'DATETIME'">
                              <p-calendar [(ngModel)]="rowData.value" name="value" dateFormat="dd/mm/yy"></p-calendar>
                            </div> 
                        </div>
                        <p-dropdown *ngIf="rowData.dataType?.isEntity" [options]="rowData.dataType?.customOptions"  
                        [(ngModel)]="rowData.value" placeholder="Selecione" name="value"></p-dropdown>
                      </div>
                      <div class="custom-file" *ngIf="rowData.dataType?.name.toUpperCase() == 'IMAGEN'">
                        <input type="file" ngModel class="custom-file-input" (change)="onFileChange($event,rowData)" id="customFileLang"name="image" required>
                        <label class="custom-file-label" for="customFileLang">Elige una imagen</label>
                      </div>
                     </div>
                  </ng-template>
                  <ng-template pTemplate="output">
                    <div *ngIf="rowData.dataType?.name.toUpperCase() == 'IMAGEN'">
                      <img *ngIf="!rowData.imgURL" src="{{coreUrlApi}}/{{valueSystemSetting}}/{{rowData.value}}" alt="" width="50px">
                      <img *ngIf="rowData.imgURL" src="{{rowData.imgURL}}" alt="" width="50px">
                    </div>
                    <div *ngIf="rowData.dataType?.name.toUpperCase() != 'IMAGEN'">
                      <div *ngIf="rowData.dataType?.name != 'DATETIME'"> {{rowData.value}}</div> 
                      <div *ngIf="rowData.dataType?.name == 'DATETIME'">{{ rowData.value | date:'dd/M/yyyy' }}</div>
                    </div>
                  </ng-template>
                </p-cellEditor>
              </td>
              <td>
                <p-cellEditor>
                  <ng-template pTemplate="input">
                      <p-dropdown dataKey="uomId" name="uom" [options]="uoms" [(ngModel)]="rowData.uom" optionLabel="name" appendTo="body" placeholder="Seleccione" ></p-dropdown>
                  </ng-template>
                  <ng-template pTemplate="output">
                      <div *ngIf="rowData.uom">{{rowData.uom.name}}</div>
                  </ng-template>
                </p-cellEditor>
              </td>
              <td>
                <button *ngIf="!editing" pButton type="button" icon="pi pi-pencil" class="ui-button-info" style="margin-right: .5em" (click)="editPropertyValue(rowData);" pInitEditableRow></button>
                <!-- Three buttons after the edit click -->
                <button *ngIf="editing" pButton type="button" icon="pi pi-check" class="ui-button-success" style="margin-right: .5em" pSaveEditableRow></button>
                <button *ngIf="editing" pButton type="button" icon="pi pi-trash" class="ui-button-danger" style="margin-right: .5em" (click)="deletePropertyValue(index)" pDeleteEditableRow></button>
                <button *ngIf="editing" pButton type="button" icon="pi pi-times" class="ui-button-danger" (click)="cancelEditPropertyValue(rowData, index);" pCancelEditableRow></button>
              </td>
            </tr>
          </ng-template>
          <ng-template pTemplate="summary">
            <div>
              <app-add-equipment-class-property-value
                (sendDataModal)="addNewPropertyValue($event)"
                [dataTypes]=dataTypes
                [uoms]=uoms
                [equipmentProperties]="equipmentProperties">
              </app-add-equipment-class-property-value>
            </div>
          </ng-template>
        </p-table>

正如我之前所说，当表格位于 p-dialog 标记之外时，不会发生此问题。但我需要它在上面。

提前致谢。

editPropertyValue 方法:

editPropertyValue(equipmentClass: EquipmentClass) {
    this.EquipmentClassClone[equipmentClass.equipmentClassId] = {...equipmentClass}
  }

Answer 1

经过几天的努力，我终于找到了问题的原因。

对于那些遇到这个问题的人，这里是答案:

可编辑表格不能在表单标签内。我从表单中删除了整个表格，它起作用了。