为什么使用 Bootstrap 进行分页不起作用？

Question

我试图通过以下链接使用分页：

https://ng-bootstrap.github.io/#/components/table/examples（在分页下）

它只是不能正常工作。 事实上，如果我想在第一页上只有 3 行（然后我通过将其设置为 3 来更改 pageSize），我会得到所有行 (4) 而不是 3。

我哪里做错了？谢谢大家的帮助

ts 文件

import { Product } from '../product';
import { Observable, Subject } from "rxjs";
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import {map} from 'rxjs/operators';

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  constructor(private productservice: ProductService, private fb: FormBuilder, private modalService: NgbModal) {} 

  productsArray: any[] = [];
  dtTrigger: Subject<any> = new Subject();

  products: Product[] = [];
  product: Product = new Product();
  productlist: any;
  page = 1;
  pageSize = 4;
  collectionSize = 8;


  ngOnInit() {
      this.productservice.getProductList().subscribe(data => {
          this.products = data;
          this.dtTrigger.next();
          this.refreshProduct();
      })
      this.editProfileForm = this.fb.group({
          productcode: [''],
          name: ['']
      });
  }

  refreshProduct() {
      this.productsArray = this.products
          .map((product: any, i: number) => ({ id: i + 1, ...product }))
          .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
  }

html文件

<div class="panel-body">
    <table class="table table-hover table-sm">
      <thead class="thead-light">
        <tr>
          <th>Product code</th>
          <th>Product name</th>
          <th>Product image</th>
          <th>Action</th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let product of products">
          <td>{{product.productcode}}</td>
          <td>{{product.name}}</td>
          <td class="py-1"><img src="data:image/png;base64"  width="80" height="80"></td>
          <td><button (click)="deleteProduct(product.productcode)" class='btn btn-primary'><i
                class="fa fa-futboll-0">Delete</i></button>
            <button type="button" class="btn btn-primary" (click)="openModal(editProfileModal, product)" >Update</button>
          </td> 
        </tr>
      </tbody><br>
    </table>
    <div class="d-flex justify-content-between p-2">
      <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" (pageChange)="refreshProducts()">
      </ngb-pagination>
    </div>
  </div>
</div>

Answer 1

您需要将 ngFor 中的 products 更改为 productsArray。

“产品”将始终包含完整列表。你总是使用“products”来填充“productsArray”，具体取决于你的需要，以及你想在 UI 上显示的内容。