Angular 单击“更新表格值”的6个表格分页按钮时，如何调用函数

在

angular 6

中，我想在

mat table

中用默认值

startIndex

和

endIndex

显示初始化后的第一页

但在我单击分页按钮后，表值不会更新，但

pageValues

已更改

getRangeLabel

函数返回正确的值，但

<div>Start Index: {{startIndex}} </div>
<div>End Index: {{endIndex}} </div> 

开始索引：{{startIndex}
结束索引：{{endIndex}}

未更新

这是我的密码：

app.js

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource, MatPaginatorIntl } from '@angular/material';
import { DataService } from '../data.service';

@Component({
  selector: 'app-manager',
  templateUrl: './manager.component.html',
  styleUrls: ['./manager.component.scss'],
  providers: [{ provide: MatPaginatorIntl, useClass: ManagerComponent }]
})
export class ManagerComponent extends MatPaginatorIntl implements AfterViewInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;

  displayedColumns = [];

  dataSource;
  display$ = false;
  pageSize = 25;
  resultsLength;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  startIndex = 0;
  endIndex = 25;

  constructor(private http: DataService) { super() }

  getDrid(start: number, stop: number) {
    this.http.getUsers(start, stop)
      .subscribe(
        data => {
          if (data.success) {
            this.resultsLength = data.rowcount;
            this.dataSource = new MatTableDataSource(data.result.rows);
            for (let index = 1; index < data.result.metaData.length; index++) {
              this.displayedColumns.push(data.result.metaData[index].name);
            }
            setTimeout(() => {
              this.display$ = true;
            }, 0);
          }
        });
  };

  getRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length == 0 || pageSize == 0) {
      return `0 of ${length}`;
    }
    length = Math.max(length, 0);
    this.startIndex = page * pageSize;
    this.endIndex = this.startIndex < length ? Math.min(this.startIndex + pageSize, length) : this.startIndex + pageSize;

    return this.startIndex + ' - ' + this.endIndex + ' of ' + length;
  };

  ngAfterViewInit() {
    this.getDrid(this.startIndex, this.endIndex);
  }
}

从'@angular/core'导入{Component，AfterViewInit，ViewChild}；
从“@angular/material”导入{MatPaginator，MatSort，MatTableDataSource，MatPaginatorIntl}；
从“../data.service”导入{DataService}；
@组成部分({
选择器：“应用程序管理器”，
templateUrl:“./manager.component.html”，
样式URL:['./manager.component.scss']，
提供程序：[{提供：MatPaginatorIntl，useClass:ManagerComponent}]
})
导出类管理器组件扩展MatPaginatorIntl在ViewInit之后实现{
@ViewChild（MatPaginator）分页器：MatPaginator；
displayedColumns=[]；
数据源；
显示$=false；
页面大小=25；
结果长度；
页面大小选项：数字[]=[5,10,25,100]；
startIndex=0；
endIndex=25；
构造函数（私有http:DataService）{super（）}
getDrid（开始：编号，停止：编号）{
this.http.getUsers（开始、停止）
.订阅(
数据=>{
if（data.success）{
this.resultsLength=data.rowcount；
this.dataSource=新MatTableDataSource（data.result.rows）；
for（让index=1；index{
this.display$=true；
}, 0);
}
});
};
getRangeLabel=（页面：编号，页面大小：编号，长度：编号）=>{
如果（长度=0 | |页面大小=0）{
返回`0 of${length}`；
}
长度=数学最大值（长度，0）；
this.startIndex=页面*页面大小；
this.endIndex=this.startIndex

这是一个截图

---

[]如何将

StartIndex

和

EndIndex

发送到服务器以获取新数据？我只看到您使用这些值进行http调用时，在

ngAfterViewInit

上初始化了它一次，即

0

和

25

。嘿@penleychan。谢谢你的回答。我是新来的。服务使用此值正常工作。但是我不能用新的startIndex和endIndex值再次发送新请求。如果可以，请帮助我。