Cannot read property 'currentValue' of undefined in JwPagination in angular 9

Question

I am using Jw pagination and i have a page size which changes on 5,10,15 using dropdown.My angular version is angular 9.

So in my html page,

<div class="col-md-6">
            <div class="row">
              <div class="col-md-3">
                  <span class="mr-2">Page Size:</span>
              </div>
              <div class="col-md-9">
                  <select (change)="updatePageSize($event.target.value)"
                  class="control-form-sm" style="width:20%;">
                <option selected>5</option>
                <option >10</option>
                <option>15</option>
                <option>20</option>
                </select>
              </div>
            </div>
          </div>

It is coming as above. When,I change the dropdown to 10,15 then in component.ts file:

updatePageSize(pageNumber:number){
  console.log(pageNumber);
    this.pageSize=pageNumber;
    this.listBooks();
}

Seeing,my console.log(pageNumber); everything is working and value is coming in console,but I got the error. Cannot read property 'currentValue' of undefined.I am using JwPagination for showing pagination.Though the error is coming,my pagination is working when i change the dropdown.

My whole component.ts file is :

import { Component, OnInit } from '@angular/core';
import { Book } from 'src/app/common/book';
import { ActivatedRoute } from '@angular/router';
import { BookService } from 'src/app/service/book.service';

@Component({
  selector: 'app-book-list',
 /* templateUrl: './book-list.component.html', */
  templateUrl: './book-grid.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {
  books :Book[];
  currentCategoryId:number;
  searchMode:boolean;

  //for pagination
  pageOfItems:Array<Book>;
  pageSize:number=6;
  //items = [];
  constructor(private bookService:BookService,private _activatedRoute:ActivatedRoute) { 

  }

  ngOnInit(): void {
   // this.listBooks();
   this._activatedRoute.paramMap.subscribe(() => {
        this.listBooks();
      })

   
  }

//pagnation
  pageClick(pageOfItems:Array<Book>){
  //  console.log(pageOfItems);
      //update the current page of items
      this.pageOfItems=pageOfItems;
  }

//update page size
updatePageSize(pageNumber:number){
  console.log(pageNumber);
    this.pageSize=pageNumber;
    this.listBooks();
}


  listBooks(){
    this.searchMode =this._activatedRoute.snapshot.paramMap.has('keyword');
    if(this.searchMode){
      //do search books
      this.handleSearchBooks();
    }
    else{
      //dispaly book based on cateogory
      this.handleListBooks();
    }
  }

  
  handleListBooks(){
        
    const hasCategoryId:boolean=  this._activatedRoute.snapshot.paramMap.has('id');

    if(hasCategoryId){
     this.currentCategoryId= +this._activatedRoute.snapshot.paramMap.get('id');
    }
    else{
      this.currentCategoryId=1;
    }

    this.bookService.getBooks(this.currentCategoryId).subscribe(
      data  => {
       // console.log(data);
       this.books=data;
      // this.items=this.books;
      }
    )
  }

  handleSearchBooks(){
       const keyword:string= this._activatedRoute.snapshot.paramMap.get('keyword');
       this.bookService.searchBooks(keyword).subscribe(
         data =>{
         //console.log(data);
         this.books=data;
       //  this.items=this.books;
       })
  }
}

Did you tried to give initial value to `pageSize` and `pageNumber` variables? — nevzatopcu, Jun 21 '20 at 08:03
pageSize:number=6; and pageNumber is tha value passing from html to component fucntion updatePageSize() — Random guy, Jun 21 '20 at 08:05
It would be great if you can share with us live code sample using something like stackblitz — wessam yaacob, Jun 21 '20 at 08:13

score 0 · Answer 1 · answered Jun 21 '20 at 08:26

You must add a value to your options (value="pageNumber"), you are only adding the shown text but it value is still undefined. try the following:

<div class="col-md-6">
            <div class="row">
              <div class="col-md-3">
                  <span class="mr-2">Page Size:</span>
              </div>
              <div class="col-md-9">
                  <select (change)="updatePageSize($event.target.value)"
                  class="control-form-sm" style="width:20%;">
                <option value="5" selected>5</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                </select>
              </div>
            </div>
          </div>

Cannot read property 'currentValue' of undefined in JwPagination in angular 9

1 Answers1