Table not displaying data when changing page in Angular

Issue

I'm trying to make a table displaying data get from an API. I manage to get the 1st page but when changing page, the data is not displayed despite I can see my data from console.log().

Here's the code to call the serice

ngOnInit(): void {
    this.productsSub = this.productsService.getProducts(this.page, this.pageSize).subscribe((res: any) => {
      this.products = res.data
      this.total_products = res.meta.pagination.total
    })
  }

  getPageFromService(currentPage: any){
    this.productsSub = this.productsService.getProducts(currentPage, this.pageSize).subscribe((res: any) => {
      this.products = res.data
    })
  }

My HTML for the table

<div class="table-wrapper">
            <table class="table table-hover" style="white-space: nowrap">
                <thead>
                    <tr class="bg-light">
                        <th scope="col">Thao tác</th>
                        <th scope="col">Mã QR</th>
                        <th scope="col">Hình ảnh</th>
                        <th scope="col">Mã Sản Phẩm</th>
                        <th scope="col">Tên Sản Phẩm</th>
                        <th scope="col">ĐVT</th>
                        <th scope="col">Scan</th>
                        <th scope="col">Danh mục</th>
                        <th scope="col">Phê duyệt</th>
                        <th scope="col">Giá</th>
                        <th scope="col">Tồn</th>
                        <th scope="col">Hiển thị</th>
                        <th scope="col">Cập nhật bởi</th>
                        <th scope="col">Ngày tạo</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let product of products | slice: (page-1)*pageSize : (page-1)*pageSize + pageSize">
                        <th scope="row" class="icon">
                            <a href="#"><fa-icon [icon]="file" style="background: orange;"></fa-icon></a>
                            <a href="#"><fa-icon [icon]="penToSquare" style="background: orange;"></fa-icon></a>
                            <a href="#"><fa-icon [icon]="trash" style="background: red;"></fa-icon></a>
                        </th>
                        <td>QR</td>
                        <td><img src='{{product.thumbnail}}' style="display: block; width: 100%; height: 100%;"></td>
                        <td>{{product.code}}</td>
                        <td>{{product.name}}</td>
                        <td>{{product.unit_name}}</td>
                        <td>0</td>
                        <td>{{product.categories}}</td>
                        <td>{{product.publish_status_name}}</td>
                        <td>{{product.original_price_formatted}}</td>
                        <td>{{product.qty}}</td>
                        <td *ngIf="product.is_featured"><div class="on">Bật</div></td> <td *ngIf="!product.is_featured"><div class="off">Tắt</div></td>
                        <td>{{product.created_by}}</td>
                        <td>{{product.created_at}}</td>
                    </tr>
                </tbody>
            </table>
</div>
<ngb-pagination (pageChange)="getPageFromService($event)" class="d-flex justify-content-center" [(page)]="page" [pageSize]="pageSize" [collectionSize]="total_products" [maxSize]="3" [rotate]="true" [ellipses]="false" [boundaryLinks]="true"></ngb-pagination>

Thanks for the help!

Solution

API call from method getProducts, is already taking care of bringing the relevant records from the server. You don't have to repeat the same logic on UI once again. You can remove the calculations part of *ngFor using slice pipe with page and pageSize based logic.

Just keep your *ngFor simple

*ngFor="let product of products"

What was wrong?

Let's assume pageSize = 10

Now the user clicks on the 2nd page of navigation. It is called getProducts with parameters page & pageSize. It brings the next page data 10 size. Now the calculation of (page-1)*pageSize : (page-1)*pageSize + pageSize becomes 10 to start slicing from 10 the index. And there are no more than 10 records, nothing was displayed.

*ngFor="let product of products | slice: (page-1)*pageSize : (page-1)*pageSize + pageSize"

Answered By - Pankaj Parkar