Angular：使用 Bootstrap 进行分页答案

【问题标题】：Angular: Pagination with BootstrapAngular：使用 Bootstrap 进行分页
【发布时间】：2021-08-22 15:38:09
【问题描述】：

我正在尝试通过以下链接向我的表格添加分页：

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

问题是我在 map(product,i).. 上遇到错误。这是错误：

“typeof Product”类型上不存在属性“map”。
参数“product”隐含的类型为“any”。
参数“i”隐含的类型为“any”。

你愿意帮助我吗？谢谢大家。

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 = Product.length;


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

     this.refreshProduct();
  }

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

【问题讨论】：

标签： angular bootstrap-4 pagination

【解决方案1】：

您可能打算执行以下操作：

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

【讨论】：