Table not displaying data when changing page in Angular-CodePudding

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 >
            <table  style="white-space: nowrap">
                <thead>
                    <tr >
                        <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" >
                            <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 >Bật</div></td> <td *ngIf="!product.is_featured"><div >Tắt</div></td>
                        <td>{{product.created_by}}</td>
                        <td>{{product.created_at}}</td>
                    </tr>
                </tbody>
            </table>
</div>
<ngb-pagination (pageChange)="getPageFromService($event)"  [(page)]="page" [pageSize]="pageSize" [collectionSize]="total_products" [maxSize]="3" [rotate]="true" [ellipses]="false" [boundaryLinks]="true"></ngb-pagination>

Thanks for the help!

CodePudding user response：

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"