分页：如何在角度 7 中获取下一个和上一个函数的当前页面值？

Question

您好，我是 Angular 的新手。我正在自己进行自定义分页。我没有得到任何链接我将如何获得下一个和上一个功能的当前页面。

 <div class="col-lg-6"> 
 <label for="pages">how many items do you want to see? : </label>
    <select id="pages" name="pages"  (change)="filter($event.target.value)" [(ngModel)]="selectedOption">
       <option value="2">2</option>
       <option value="4">4</option>
       <option value="6">6</option>
       <option value="8">8</option>
      </select>
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Email</th>
                <th>Details</th>
                <th>phoneNo</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let emp of indexArray; let i=index;">
                <th scope="row">{{emp.id}}</th>
                <td>{{emp.name}}</td>
                <td>{{emp.email}}</td>
                <td>{{emp.details}}</td>
                <td>{{emp.phoneNo}}</td>
                <td> 
                    <button type="button" class="btn btn-secondary" (click) = "edit(i)">Edit</button> 
                    <button type="button" class="btn btn-secondary" (click) = "delete(i)">Delete</button>
                 </td>
            </tr>
        </tbody>
    </table>




 <nav aria-label="Page navigation example">
                <ul class="pagination">
                 <li class="page-item">
                    <a class="page-link"  aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                      <span class="sr-only" (click)="Previous()">Previous</span>
                    </a>
                  </li>
               <li class="page-item" *ngFor="let hero of pageArray">
                      <a class="page-link" (click) = "indexData(hero)">{{ hero }}</a> </li>
                <li class="page-item">
                    <a class="page-link"  aria-label="Next" (click) = "next(currentPage)">
                      <span aria-hidden="true">&raquo;</span>
                      <span class="sr-only" >Next</span>
                    </a>
                  </li>
                </ul>
              </nav>
    </div> 

**我的打字稿代码是**

employeDetail: any = [];
employe = {name: '', email: '', details: '', phoneNo: ''};
employes;
index;
Tpage: any; // total page
nPage; // current page
Tvalue; // total value of student
Items ; // Item per page
pageArray = [];
indexArray = [];
stratIndex;
endIndex;
selectedOption: string;
currPage: string;


page() {
  this.employes =  JSON.parse(localStorage.getItem('employeDetail'));
  this.Items =  JSON.parse(localStorage.getItem('itemsperpage'));
  this.Tvalue = this.employes.length;
  this.Tpage = this.Tvalue / this.Items;
 // console.log(this.Tpage);
    if (Number.isInteger(this.Tpage)) {
      this.Tpage = this.Tpage;
    } else {
      this.Tpage = Math.ceil(this.Tpage );
    }
    for (let i = 1; i <= this.Tpage ; i++) {
        this.pageArray.push(i);
      }
      this.selectedOption = this.Items;
}

我想要下一个和上一个函数的 currpage 值！！

next(currPage) {
      console.log(currPage);
    alert('kk');
    }
   previous(currPage) {
      console.log(currPage);
    alert('kk');
    }

**我在这个函数中获取当前页面值**

 indexData(currentPage) {
          this.indexArray = [];
          this.currPage = currentPage;
        this.Items =  JSON.parse(localStorage.getItem('itemsperpage'));
        this.stratIndex = (currentPage - 1) * this.Items;
        // console.log(this.stratIndex);
        this.endIndex = parseInt(this.stratIndex) + parseInt(this.Items) ;
        this.endIndex = this.endIndex - 1;
        for (let i = this.stratIndex ; i <=  this.endIndex ; i++) {
          if (this.employes[i].length === '') {
          //  console.log('kk');
          } else {
        this.indexArray.push(this.employes[i]);
          }
        }

        }

**此功能用于按每页的项目进行过滤**

   filter(val) {
          localStorage.setItem('itemsperpage', JSON.stringify(val));
          this.indexArray = [];
          this.pageArray = [];
          this.endIndex = val - 1 ;
          for (let i = 0 ; i <=  this.endIndex ; i++) {
            this.indexArray.push(this.employes[i]);
            }

            this.Tpage = this.Tvalue / val;
            if (Number.isInteger(this.Tpage)) {
              this.Tpage = this.Tpage;
            } else {
              this.Tpage = Math.ceil(this.Tpage );
            }
            for (let i = 1; i <= this.Tpage ; i++) {
              this.pageArray.push(i);
            }
        }

        constructor() { }
       ngOnInit() {
        this.page();
             for (let i = 1; i <= this.Items ; i++) {
                 this.indexArray.push(this.employes[i]);
              }
        }

        createData(employe) {
          let id = 0;
          let employeDetail = JSON.parse(localStorage.getItem('employeDetail'));
          if (employeDetail === null || employeDetail === 0) {
           employeDetail = [];
           id = 0;
          } else {
           id = employeDetail[employeDetail.length - 1].id;
         }
        id++;
        employe.id = id;
        // this.employes = employeDetail.push(employe); this will return number of push employes.!!! so we will directly use employedetails
        employeDetail.push(employe);
         this.employes = employeDetail;
        localStorage.setItem('employeDetail', JSON.stringify(employeDetail));
        }
        }

Answer 1

我得到了答案：

currPage: any = 1;

    next() {
      this.currPage = this.currPage + 1;
      this.indexArray = [];
      this.Items =  JSON.parse(localStorage.getItem('itemsperpage'));
      this.stratIndex =  (this.currPage - 1) * this.Items;
      this.endIndex = parseInt(this.stratIndex) + parseInt(this.Items) ;
      this.endIndex = this.endIndex - 1;
    for (let i = this.stratIndex ; i <=  this.endIndex ; i++) {
      if (this.employes[i].length === '') {
      } else {
    this.indexArray.push(this.employes[i]);
      }
    }

    }

这里我已经获取了当前页面的值：所以这里我已经为 this.currpage == cuurentPage 赋值了

indexData(currentPage) {
  this.indexArray = [];
  **this.currPage = currentPage;**
this.Items =  JSON.parse(localStorage.getItem('itemsperpage'));
this.stratIndex = (currentPage - 1) * this.Items;
this.endIndex = parseInt(this.stratIndex) + parseInt(this.Items) ;
this.endIndex = this.endIndex - 1;
for (let i = this.stratIndex ; i <=  this.endIndex ; i++) {
  if (this.employes[i].length === '') {
  } else {
this.indexArray.push(this.employes[i]);
  }
}