p-table 和 pEditable 列正在替换第二个 table 的值

Question

我有两个 tables (p-table) 编辑行。但是，当我更新第一个 table 中的行值时，它也会更新第二个 table。如何将这 table 行设置为唯一行？

-> Table 分量：

<p-table [value]="coberturas" dataKey="id" editMode="row">
<ng-template pTemplate="header">
  <tr>
    <th class="width-20rem">
      {{ t("coberturas.dadosCobertura.tabela.cobertura") }}
    </th>
    <th>{{ t("layout.topicosComuns.capitalIndividual") }}</th>
    <th>{{ t("coberturas.dadosCobertura.tabela.vlrMin") }}</th>
    <th>{{ t("coberturas.dadosCobertura.tabela.vlrMax") }}</th>
    <th>{{ t("layout.topicosComuns.capitalGlobal") }}</th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-cobertura>
  <tr>
    <td>
      {{ cobertura.nomeMatrizCobertura }}
    </td>
    <td pEditableColumn>
      <p-cellEditor>
        <ng-template pTemplate="input">
          <p-dropdown
            *ngIf="cobertura.codigoMatrizCobertura == 819"
            [(ngModel)]="auxilioFuneral"
            [options]="auxiliosFunerais"
            optionLabel="valor"
            [style]="{ width: '100%' }"
          ></p-dropdown>
          <input
            *ngIf="cobertura.codigoMatrizCobertura != 819"
            [(ngModel)]="cobertura.capitalIndividual"
            pInputText
            type="text"
            required
          />
        </ng-template>
        <ng-template pTemplate="output">
          {{ cobertura.capitalIndividual }}
        </ng-template>
      </p-cellEditor>
    </td>
    <td pEditableColumn>
      <p-cellEditor>
        <ng-template pTemplate="input">
          {{ cobertura.valorMatrizMinimoImportancia | realPipe }}
        </ng-template>
        <ng-template pTemplate="output">
          {{ cobertura.valorMatrizMinimoImportancia | realPipe }}
        </ng-template>
      </p-cellEditor>
    </td>
    <td pEditableColumn>
      <p-cellEditor>
        <ng-template pTemplate="input">
          {{ cobertura.valorMatrizMaximoImportancia | realPipe }}
        </ng-template>
        <ng-template pTemplate="output">
          {{ cobertura.valorMatrizMaximoImportancia | realPipe }}
        </ng-template>
      </p-cellEditor>
    </td>
    <td pEditableColumn></td>
  </tr>
</ng-template>

我正在设置两个 table 具有两个不同的值，每个 'als-tabela-cotacao' 都是上面的组件

    <als-tabela-cotacao
  *ngIf="!tabelaSocio"
  [coberturas]="listaCoberturasEmpregados"
></als-tabela-cotacao>

<als-tabela-cotacao
  *ngIf="tabelaSocio"
  [coberturas]="listaCoberturasSocios"
></als-tabela-cotacao>

Answer 1

所以你所做的是将相同的东西 (res.data.listaOcorrenciaMatrizCobertura) 分配给两个变量 listaCoberturasEmpregados 和 listaCoberturasSocios。对于 javascript 它仍然是一样的，因为它指的是同一个原始变量。我推荐的是使用 destruct 运算符创建数组的副本 = this.listaCoberturasSocios = [...res.data.listaOcorrenciaMatrizCobertura]

在这里您可以查看一个工作示例如何操作，取消注释代码以查看正确的解决方案：

https://stackblitz.com/edit/angular-ivy-ih6bod?file=src%2Fapp%2Fapp.component.ts

p-table 和 pEditable 列正在替换第二个 table 的值

p-table with pEditableColumn is replacing value for second table

angular

primeng

primeng-datatable