Merge pull request #6605 from abpframework/fix/6602

Fixed ListService to make property filters work properly from 2nd page onward

npm/ng-packs/packages/core/src/lib/services/list.service.ts

@@ -17,8 +17,6 @@ import { LIST_QUERY_DEBOUNCE_TIME } from '../tokens/list.token';
 export class ListService<QueryParamsType = ABP.PageQueryParams> implements OnDestroy {
   private _filter = '';
   set filter(value: string) {
-    if (this._filter !== value) this._page = 0;
-
     this._filter = value;
     this.get();
   }
@@ -35,6 +33,7 @@ export class ListService<QueryParamsType = ABP.PageQueryParams> implements OnDes
     return this._maxResultCount;
   }
 
+  private _skipCount = 0;
   private _page = 0;
   set page(value: number) {
     if (value === this._page) return;
@@ -81,6 +80,7 @@ export class ListService<QueryParamsType = ABP.PageQueryParams> implements OnDes
   }
 
   get = () => {
+    this.resetPageWhenUnchanged();
     this._query$.next(({
       filter: this._filter || undefined,
       maxResultCount: this._maxResultCount,
@@ -110,6 +110,15 @@ export class ListService<QueryParamsType = ABP.PageQueryParams> implements OnDes
   ngOnDestroy() {
     this.destroy$.next();
   }
+
+  private resetPageWhenUnchanged() {
+    const skipCount = this._page * this._maxResultCount;
+
+    if (skipCount === this._skipCount) {
+      this._page = 0;
+      this._skipCount = 0;
+    } else this._skipCount = skipCount;
+  }
 }
 
 export type QueryStreamCreatorCallback<T, QueryParamsType = ABP.PageQueryParams> = (

npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts

@@ -68,22 +68,22 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
   }
 
   private subscribeToQuery() {
-    this.querySubscription.add(
-      this.list.query$.subscribe(() => {
-        if (this.list.page !== this.table.offset) this.table.offset = this.list.page;
-      }),
-    );
+    if (!this.querySubscription.closed) this.querySubscription.unsubscribe();
+
+    this.querySubscription = this.list.query$.subscribe(() => {
+      const offset = this.list.page;
+      if (this.table.offset !== offset) this.table.offset = offset;
+    });
   }
 
   ngOnChanges({ list }: SimpleChanges) {
+    this.subscribeToQuery();
+
     if (!list.firstChange) return;
 
     const { maxResultCount, page } = list.currentValue;
     this.table.limit = maxResultCount;
     this.table.offset = page;
-
-    this.querySubscription.unsubscribe();
-    this.subscribeToQuery();
   }
 
   ngOnDestroy() {