У меня есть таблица с данными о потоках, а на ее rowExpand
вложенная таблица. Данные вложенной таблицы зависят от значения параметра родительского элемента (числа). Допустим, если число равно 1, вложенная таблица будет иметь 4 подпотока (черный, зеленый, синий, розовый). Если число равно 2, вложенная таблица будет иметь 3 подпотока (желтый, синий, красный) и так далее. Первая таблица использует потоки как значение, вторая - подпотоки.
Проблема в том, что когда я расширяю строку, все предыдущие развернутые строки обновляют там данные, чтобы быть такими же, как последние развернутые.
Является можно ли развернуть строку и отобразить ее вложенную таблицу без обновления предыдущих вложенных таблиц?
Вот мой код:
html первая таблица
<p-table #table styleClass="ui-table-tbody" [columns]="cols" [value]="flows" dataKey="flowId" [rows]="20"
[rowsPerPageOptions]="[20, 50, 100, { showAll: 'All' }]" (onRowExpand)="getSubFlows($event,data)"
paginatorPosition=both [paginator]="true">
<ng-template pTemplate="paginatorright" let-state>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 2.25em"></th>
<th *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
<tr [ngClass]="rowData.status ==='ERROR' ? 'red' : rowData.status ==='WARNING' ? 'yellow' : 'blue'">
<td>
<a href="#" [pRowToggler]="rowData">
<i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
</a>
</td>
<td [ngClass]="{'center' : (col.field ==='checked' || col.field ==='status') }"
*ngFor="let col of columns" [ngStyle]="{'width': col.width}">
{{rowData[col.field]}}
<p-column field="checked">
<ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="body">
<input type="checkbox" [(ngModel)]="row[col.field]" />
</ng-template>
</p-column>
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
<tr>
<td [attr.colspan]="columns.length + 1">
<p-table [columns]="cols2" [value]="subflows">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ngStyle]="{'width': col.width}" [ngClass]='height'>
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [ngClass]="rowData.type ==='ERROR' ? 'red' : 'blue'">
<td class="my-center-text" *ngFor="let col of columns; let i = index"
[attr.rowspan]="rowData.component.index === 1 ? 2 : 1"
[ngClass]="{'center' : (col.field ==='detail' || col.field ==='objet' || col.field ==='messageT' || col.field === 'etape')}">
{{rowData[col.field]}}
<button pButton style="height:30px;" *ngIf="col.field === 'detail' " label="Détails"
(click)="show(rowData)" class="ui-button-secondary"></button>
<button pButton style="height:30px;" icon="pi pi-search" *ngIf="col.field === 'objet' "
(click)="objet($event,data)" class="ui-button-secondary"></button>
<button pButton style="height:30px;" icon="pi pi-search" *ngIf="col.field === 'messageT' "
(click)="checked($event,data)" class="ui-button-secondary"></button>
</td>
</tr>
</ng-template>
</p-table>
</td>
</tr>
</ng-template>
</p-table> paginatorPosition=both [paginator]="true">
<p-table [columns]="cols2" [value]="subflows">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ngStyle]="{'width': col.width}" [ngClass]='height'>
{{col.header}}
</th>
</p-table>
</td>
</tr>
</ng-template>
</p-table>
мой component.ts
getSubFlows(data) {
this.subflows = [];
this.datas2 = [];
this.subflowsByFlowId = [];
console.log("hello", data);
this.flowService.fetchSubFlowsByFlow(data.data.flowId).subscribe(
datas2 => {
this.datas2 = datas2;
for (let i = 0; i < this.datas2.length; i++) {
this.subflows.push({
date: datas2[i].ClientLogTimeStamp,
type: datas2[i].LogRole,
code: datas2[i].Code,
message: datas2[i].TXT,
component: datas2[i].Component,
etape: datas2[i].Etape,
detail: "",
objet: "",
messageT: "",
logId: datas2[i].LogId
});
}
this.subflowsByFlowId.push({
SubFlow : this.subflows,
FlowId: data.data.flowId
});
console.log("hello8", this.subflowsByFlowId);
console.log("hi6", this.subflows);
});
this.cols2 = [
{ field: 'date', header: 'Date', width: '10%' },
{ field: 'type', header: 'Type', width: '4%' },
{ field: 'code', header: 'Code', width: '9%' },
{ field: 'message', header: 'Message', width: '47%' },
{ field: 'component', header: 'Component', width: '13%' },
{ field: 'etape', header: 'Etape', width: '4%' },
{ field: 'detail', header: '', width: '6%' },
{ field: 'objet', header: 'Objet', width: '4%' },
{ field: 'messageT', header: 'Message Technique', width: '6%' }, 0.
];
}
Большое спасибо за любой ответ :)