angular - 在 Angular 中更改页面时表格不显示数据

Question

我正在尝试制作一个显示从 API 获取的数据的表格。我设法获得第一页，但在更改页面时，尽管我可以从 console.log() 看到我的数据，但数据并未显示。

这是调用服务的代码

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
    })
  }

我的表格 HTML

<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>

感谢您的帮助!

Answer 1

来自方法 getProducts 的 API 调用已经负责从服务器获取相关记录。您不必在 UI 上再次重复相同的逻辑。您可以使用基于 page 和 pageSize 逻辑的 slice 管道删除 *ngFor 的计算部分。

只要保持你的*ngFor简单

*ngFor="let product of products"

出了什么问题？

假设pageSize = 10

现在用户单击导航的第二页。它被称为 getProducts，带有参数 page 和 pageSize。它带来下一页数据 10 大小。现在 (page-1)*pageSize 的计算: (page-1)*pageSize + pageSize 变为 10 从 10 开始切片指数。并且没有超过10条记录，没有显示任何内容。

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