Open Closed

Paging doesn't work as expected on multiple ngxdatatable in the same component #1394


User avatar
1
ersin.gundogdu created
  • ABP Framework version: v4.3.0
  • UI type: Angular
  • DB provider: EF Core
  • Steps to reproduce the issue:

I have two ListService and two ngxdatatable in my component. When i press page 2 button on one of the datatables , both of them tries to retrieve their(self) second page's results.

my.component.ts:

constructor(
    public readonly purchaseList: ListService, 
    public readonly expenseList: ListService, 
  ) { }
  ngOnInit(): void {
    this.getListPurchase();
    this.getExpenseList();
  }
  getListPurchase()
  {
    let temp={} as GetServicePurchasesInput;
    const purchaseStreamCreator = (query) => this.servicePurchasesService.getList({...query,...temp});
    this.purchaseList.hookToQuery(purchaseStreamCreator).subscribe((response) => {
      this.purchaseDto=response;
    });    
  }
  getExpenseList()
  {
    let temp={} as GetServiceExpensesInput;
    const expenseStreamCreator = (query) => this.serviceExpensesService.getList({...query});
    this.expenseList.hookToQuery(expenseStreamCreator).subscribe((response) => {
      this.expenseDto=response;
    });
  }

my.component.html:

 <ngx-datatable
              [rows]="expenseDto.items"
              [count]="expenseDto.totalCount"
              [list]="expenseList"
              class="material striped"
              default
            >
            // Columns Definition...
</ngx-datatable>
 <ngx-datatable
          [rows]="purchaseDto.items"
          [count]="purchaseDto.totalCount"
          [list]="purchaseList"
          class="material striped"
          default
        >
      // Columns Definition...
</ngx-datatable>

1 Answer(s)
  • User Avatar
    3
    bunyamin created

    You encountered this problem because, purchaseList and expenseList are referring to the same instance of ListService. You need to provide a different service for each. Here is how you can separate them in a simple way

    @Component({
      // ...
      providers: [{
        provide: 'PURCHASE_LIST',
        useClass: ListService
      }, {
        provide: 'EXPENSE_LIST',
        useClass: ListService
      }]
    })
    export class MyComponent {
    
      constructor(
        @Inject('PURCHASE_LIST') public readonly purchaseList: ListService, 
        @Inject('EXPENSE_LIST') public readonly expenseList: ListService, 
      ) { }
    }
    
Made with ❤️ on ABP v9.0.0-preview. Updated on October 07, 2024, 08:52