p-table 和 pEditable 列正在替换第二个 table 的值
p-table with pEditableColumn is replacing value for second table
我有两个 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>
所以你所做的是将相同的东西 (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
我有两个 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>
所以你所做的是将相同的东西 (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