Я использую разбиение на страницы Jw, и у меня есть размер страницы, который изменяется на 5,10,15 с помощью раскрывающегося списка. Моя angular версия - angular 9.
Итак, на моей странице html
<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();
}
введите описание изображения здесь
Видно, мой console.log(pageNumber); все работает и в консоль поступает значение, но я получил ошибку. Cannot read property 'currentValue' of undefined. Я использую JwPagination для отображения разбивки на страницы. Несмотря на то, что возникает ошибка, моя разбивка на страницы работает, когда я меняю раскрывающийся список.
Весь мой файл component.ts:
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;
})
}
}