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)
-
3
You encountered this problem because,
purchaseListandexpenseListare referring to the same instance ofListService. 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, ) { } }
