Question

我正在使用Jw分页，并且我的页面大小使用下拉菜单在5,10,15上更改。我的角度版本是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>

它如上所述。何时，我将下拉列表更改为10,15，然后在component.ts文件中：

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

Answer 1

您必须在选项（value="pageNumber"中添加一个值，您只是添加显示的文本，但其值仍未定义。尝试以下操作：

<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>

无法读取角度9的JwPagination中未定义的属性'currentValue'

1 个答案: