Sort Observable Listview

[Emanuele]

Good morning, these days I'm facing an annoying problem. I need to be able to apply a sort on a list composed of Observable. The code I apply is as follows:

 //Ascend

      if (sortAscend) {

         this.filteredVehicles$ = of(vehicleList).pipe(map(result => result.sort((a: any, b: any) => {

            if (a[keyString] < b[keyString]) {

               return -1;

            } else if (a[keyString] > b[keyString]) {

               return 1;

            } else {

               return 0;

            }

         })));

         //Descend

      } else {

         this.filteredVehicles$ = of(vehicleList).pipe(map(result => result.sort((a: any, b: any) => {

            if (a[keyString] > b[keyString]) {

               return -1;

            } else if (a[keyString] < b[keyString]) {

               return 1;

            } else {

               return 0;

            }

         })));

      }

 but this triggers the ExpressionChangedAfterItHasBeenCheckedError error, going to change the data later. Is there a way I can avoid this?

Regards,

Emanuele

[Sowmiya Padmanaban]

Hi Emanuele, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your attached code snippet. We suspect that, you have tried to perform custom sorting operation for ListView component. But our Listview component, we have provided a support for sorting by using sortOrder property to perform sorting.  

 

For your reference we have prepared a sample. Refer the sample link below. 

 

https://stackblitz.com/edit/angular-fhwtug?file=main.ts 

 

To know about the sorting, refer the below link. 

 

https://www.syncfusion.com/angular-ui-components/angular-listview 

 

UG Documentation: https://ej2.syncfusion.com/angular/documentation/listview/how-to/filter-list-items-in-the-listview/ 

 

 

If you want to perform custom sort operations, can you please share additional details regarding your requirement it will helpful for us to resolve your issue at earlier. 

 

 

Please let us know, if you have any concerns. 

 

 

Regards, 

Sowmiya.P 

[Emanuele]

Hi Emanuele, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your attached code snippet. We suspect that, you have tried to perform custom sorting operation for ListView component. But our Listview component, we have provided a support for sorting by using sortOrder property to perform sorting.  

 

For your reference we have prepared a sample. Refer the sample link below. 

 

https://stackblitz.com/edit/angular-fhwtug?file=main.ts 

 

To know about the sorting, refer the below link. 

 

https://www.syncfusion.com/angular-ui-components/angular-listview 

 

UG Documentation: https://ej2.syncfusion.com/angular/documentation/listview/how-to/filter-list-items-in-the-listview/ 

 

 

If you want to perform custom sort operations, can you please share additional details regarding your requirement it will helpful for us to resolve your issue at earlier. 

 

 

Please let us know, if you have any concerns. 

 

 

Regards, 

Sowmiya.P 

Thanks for the reply, it's not a suspect, but I confirm that I created a custom sorting, since I have an observable list of a custom class, having to sort it by foreign key, which could be any data in it.

[Keerthana Rajendran]

Hi Emanuele,  

 

Good day to you. 

 

Please refer to the solutions provided in the below link for resolving the reported error during sorting.  

 

https://medium.com/better-programming/expressionchangedafterithasbeencheckederror-in-angular-what-why-and-how-to-fix-it-c6bdc0b22787  

 

After resolving this error, you can use fields and dataSource property to bind the re-ordered list data to EJ2 ListView component. 

 

Please let us know if any concern on this.  

 

Regards, 

Keerthana.