Lose checked item in ST table when I navigate using pagination

20 views Asked by At

i have this component

import { Component } from '@angular/core';

import { STChange, STColumn, STData } from '@delon/abc/st';

@component({
selector: 'components-st-checkbox',
template:  <div class="mb-md"> <button nz-button (click)="st.checkAll(true)">All</button> <button nz-button (click)="st.clearCheck()">Clean</button> </div> <st #st [data]="data" [columns]="columns" (change)="change($event)" [ps]="1" [res]="{ process: dataProcess }" ></st>,
})
export class ComponentsStCheckboxComponent {
data = [
{
id: 13,
creeLe: '2023-02-07T11:28:41.915+00:00',
creePar: '[email protected]',
modifieLe: '2023-02-07T11:28:41.924+00:00',
modifiePar: '[email protected]',
identifiant: 'TRS-3175008',
libelle: 'T3',
description: 'T3',
criticiteTierId: 2,
statut: 2,
messageAcceuil:
'Cher délégataire, nous avons bien pris en compte, dans le questionnaire de cette année, que l’activité d’infogérance a été renouvelée avec vous sur ces 4 prochaines années.',
pieceJointes: [],
},
{
id: 4,
creeLe: '2023-02-02T11:24:21.131+00:00',
creePar: '[email protected]',
modifieLe: '2023-02-02T11:24:21.176+00:00',
modifiePar: '[email protected]',
identifiant: 'TRS-4370549',
libelle: 'T1',
description: 'TT11',
criticiteTierId: 2,
statut: 2,
messageAcceuil:
'Cher délégataire, nous avons bien pris en compte, dans le questionnaire de cette année, que l’activité d’infogérance a été renouvelée avec vous sur ces 4 prochaines années.',
pieceJointes: [],
},
{
id: 12,
creeLe: '2023-02-07T11:28:26.374+00:00',
creePar: '[email protected]',
modifieLe: '2023-02-07T11:28:26.385+00:00',
modifiePar: '[email protected]',
identifiant: 'TRS-6230723',
libelle: 'T2',
description: 'T2',
criticiteTierId: 1,
statut: 2,
messageAcceuil:
'Cher délégataire, nous avons bien pris en compte, dans le questionnaire de cette année, que l’activité d’infogérance a été renouvelée avec vous sur ces 4 prochaines années.',
pieceJointes: [],
},
];
columns: STColumn[] = [
{ title: '', index: 'identifiant', type: 'checkbox' },
{ title: 'Identifiant', index: 'identifiant', filter: { type: 'keyword' } },
{ title: 'Libellé', index: 'libelle', filter: { type: 'keyword' } },
{
title: 'Statut',
index: 'statut',
filter: {
multiple: false,
menus: [
{ text: 'Actif', value: 1 },
{ text: 'Non-Actif', value: 2 },
],
},
},
{
title: 'Criticité',
index: 'criticiteTierId',
filter: {
multiple: true,
menus: [
{ text: 'standard', value: 2 },
{ text: 'critique', value: 1 },
{ text: 'important', value: 3 },
],
},
},
];

selectesRows = [];

change(e: STChange): void {
if (e.checkbox && e.checkbox.length > 0) {
      for (const selecteditem of e.checkbox) {
        if (
            this.objectSetDTO.findIndex(
                (sfm) => sfm.idobject === selecteditem.idobject) === -1
        ) {
          this.objectSetDTO.push(selecteditem);
        }
      }
console.log(this.selecteditem);
}
}

I select an element in the first page and when I switch to the second page, I lose my selected element in the first page.

I have attempted to implement a feature that ensures objects remain checked when users navigate between pages using the StTable component. To achieve this, I have created a function called dataProcess which should maintain the checked state of objects based on their IDs. Here is the relevant code snippet:

dataProcess(data: STData[]): STData[] { return data.map((i, index) => {
 let id = this.objectSetDTO.map(id => id.idobject); 
for (let y of id) { if (index === this.idST.indexOf(y)) { 
i.checked = true; return i; } } 
return i; 
}); } 

In this code, dataProcess is designed to check objects by comparing them with their IDs and then get the object index in the StTable to marquee it as checked.

However, the issue I'm facing is that the checked state is not being preserved when navigating between pages using StTable. It seems that adding [res]="{ process: dataProcess }" in the St component

0

There are 0 answers