Angular: Pagination with Bootstrap

Question

I am trying to add pagination to my table by following this link:

https://ng-bootstrap.github.io/#/components/table/examples (under Pagination).

The problem is that I'm getting an error on map(product,i)..; this is the error:

Property 'map' does not exist on type 'typeof Product'.
Parameter 'product' implicitly has an 'any' type.
Parameter 'i' implicitly has an 'any' type.

Will you kindly help me? Thank you all.

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

moustafa · Accepted Answer · 2021-06-04 18:04:01Z

1

you probably meant to do the below:

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

edited Jun 4, 2021 at 18:04

answered Jun 4, 2021 at 15:16

moustafa

2712 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Pagination with Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related