I'm using angular version "@angular/cli": "~11.1.1" with NgRX Store module.The project have all NgRX layers.
Problem: I have a screen with a tab with two tabs's contents. In each tabs, there is a *ngFor="let item of itemListFiltter1$ | async" class="center-text". However the pagination is the itemList without filtter. How I control the pagination to change when we change the tabs?
Code - Selectors:
export const selectItemListFiltter1= createSelector(
selectItemState,
({resultPage}) => resultPage?.result?.filter(val => val.item.codItem == 0)
)
Code - List Component:
ngOnInit(): void {
this.store.dispatch(startLoad());
this.itemListFiltter1$ = this.store.pipe(select(selectItemListFiltter1));
this.itemListFiltter2$ = this.store.pipe(select(selectItemListFiltter2));
}
UPDATED
The backend sends the pagination. After created the inicial state, we need to change the values like the result by selectItemListFiltter1 method. Below is the result's json to represent the data:
Inicial state - backend Json:
{
"pagination": {
"totalRows": 6,
"totalPages": 1,
"page": 0,
"pageSize": 10
},
"result": [
{
"idProduct": 3,
"item": 1,
"value": 0.00
},
{
"idProduct": 2,
"item": 1,
"value": 0.00
},
{
"idProduct": 10,
"item": 1,
"value": 0.00
},
{
"idProduct": 3,
"item": 2,
"value": 0.00
},
{
"idProduct": 2,
"item": 2,
"value": 0.00
},
{
"idProduct": 10,
"item": 2,
"value": 0.00
},
],
"mesages": []
}
After selectItemListFiltter1 expected in the ItemListFiltter1
P.S. Here is only the representation.
{
"pagination": {
"totalRows": 3,
"totalPages": 1,
"page": 0,
"pageSize": 10
},
"result": [
{
"idProduct": 3,
"item": 1,
"value": 0.00
},
{
"idProduct": 2,
"item": 1,
"value": 0.00
},
{
"idProduct": 10,
"item": 1,
"value": 0.00
},
],
"mesages": []
}
Does anyone have any idea?