Angular 素数NG'上的奇异行为;s可编辑表

Angular 素数NG'上的奇异行为;s可编辑表,angular,primeng,Angular,Primeng,当我试图编辑Prime NG的可编辑行上的一些行时,我遇到了一个奇怪的问题 如果我们查看下面的网格,我们可以看到所有行都有不同的值: 如果我编辑第一行,似乎没有问题: 但如果我尝试一次编辑多行,所有行都将显示相同的值: 仅当网格位于p-dialog标记内时,才会发生此问题 <!-- Header do modal tem uma tabela--> <p-table [value]="equipmentClass.propertyValuesList" d

当我试图编辑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>

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

对于那些面临这一问题的人,以下是答案:


可编辑表不能位于表单标记内。我从表单中删除了整个表,它成功了。

您可以添加更多关于ts代码的详细信息吗?因为这个问题可能是因为
editPropertyValue
方法而发生的。我在问题的末尾添加了你问的方法。我对表单标签也有类似的问题。当我点击编辑来编辑行时,只有第一列会变成可编辑的,一旦我从表单标签中删除了表格,一切都按预期进行了,我不知道为什么会发生这种情况哈哈
editPropertyValue(equipmentClass: EquipmentClass) {
    this.EquipmentClassClone[equipmentClass.equipmentClassId] = {...equipmentClass}
  }