Angular Mat Paginator不在基于api的Mat表上工作

我正在实现一个mat表，用于从API检索信息

mat表按预期显示数据

mat分页器不工作

下面是我正在使用的代码：

组成部分：

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



@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.css'],

})
export class ProjectsComponent implements OnInit,AfterViewInit {
  projects: any;
  dataSource = new MatTableDataSource();
  displayedColumns: any;
  length: number;
  pageSize: number=1;
  pageSizeOptions = [1, 5, 10, 50];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  constructor(private dataService: DataService) { 

  }



  ngOnInit() {
    console.log("Retrieving projects");
    this.getProjects().then(
      projects => {
        console.log("Projects retrieved", projects);
        this.projects=projects;
        this.dataSource = this.projects;
        console.log(this.dataSource);
        this.displayedColumns = [
          'prj_id',
          'title',
          'priority_id'
        ];
        this.length=this.projects.length;


      }
    ).catch(function (data){
      console.log("Rejected", data);
    });

  }

  ngAfterViewInit() {
   this.dataSource.paginator = this.paginator;
  }


  getProjects(){
    let promise = new Promise((resolve, reject) => {
      this.dataService.getProjects().subscribe(
        projects => {
          resolve(projects);
        },
        error => {
          console.log("error retrieving projects");
          reject("error retrieving projects");
        }
      )
    });
    return promise;
  }

}

export interface Projects {
  prj_id: string;
  title: string;
  priority_id: number;
}

HTML视图：

<div fxLayout="column" fxLayoutAlign="center center" >


    <button mat-raised-button color="primary" ><mat-icon>add</mat-icon>Project</button>

</div>
<div fxLayout="row" fxLayoutWrap="wrap">

  <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
      <mat-card>
          <mat-card-content> 
              <mat-card-title backgroundColor="primary">Projects</mat-card-title>
              <div class="table-rasponsive">
                  <mat-table #table [dataSource]="dataSource">

                  <!-- Position Column -->
                  <ng-container matColumnDef="prj_id">
                    <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
                    <mat-cell *matCellDef="let element"> {{element.prj_id}} </mat-cell>
                  </ng-container>

                  <!-- Name Column -->
                  <ng-container matColumnDef="title">
                    <mat-header-cell *matHeaderCellDef> TITLE </mat-header-cell>
                    <mat-cell *matCellDef="let element"> {{element.title}} </mat-cell>
                  </ng-container>

                   <!-- Name Column -->
                   <ng-container matColumnDef="priority_id">
                      <mat-header-cell *matHeaderCellDef> PRIORITY </mat-header-cell>
                      <mat-cell *matCellDef="let element"> {{element.priority_id}} </mat-cell>
                    </ng-container>



                  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                </mat-table>

                <mat-paginator  #paginator
                                [length]="length"
                                [pageSize]="pageSize"
                                [pageSizeOptions]="pageSizeOptions">
                </mat-paginator>
              </div>    
          </mat-card-content>
      </mat-card>
  </div>
</div>

添加项目
项目
身份证件
{{element.prj_id}
标题
{{element.title}
优先
{{element.priority_id}

尝试以下操作：从ngAfterViewInit（）中删除代码

---

并将其添加到ngOnInit（）中

请尝试如下初始化MATPAGINATOR和MATSORT，这对我很有效

public dataSource = new MatTableDataSource([]);
@ViewChild(MatSort) matSort: MatSort;

private paginator: MatPaginator;
private sort: any;

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

  @ViewChild(MatSort) set content(content: ElementRef) {
    this.sort = content;
    if (this.sort) {
      this.dataSource.sort = this.sort;
    }
  }

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

上面的代码检查分页器和排序变量，当它们未定义时将被设置。 也不需要在HTML文件中添加#paginator

感谢和问候，

---

基肖尔·库马尔。K

在经历了很多头痛之后，我确实找到了问题所在。 检查这条线

this.dataSource = this.projects;

并用

this.dataSource.data = this.projects;

它应该能解决你的问题。另外，ngAfterViewInit是正常的，不要更改它。

使用下面的行

this.dataSource = new MatTableDataSource(this.projects);

如果paginator仍不工作，则对于动态加载的表数据，请使用MatPaginator的

read

参数

@ViewChild(MatPaginator, {read: true}) paginator: MatPaginator;

---

这将完成任务。

如果您从API获取数据，那么任务是异步的意味着即使没有完成API请求，它也会调用下一步，如果您应用paginator而没有数据，则数据源中没有数据paginator肯定无法工作。如果您使用console.log（this.paginator.paginator），您将无法定义，这意味着您的数据源未初始化，因此您无法将paginator应用于数据源

要使其正常工作，请始终在完成API请求后分别分配数据和分页器。

    dataSource = new MatTableDataSource();
    @ViewChild(MatPaginator) paginator: MatPaginator;
    
    ngOnInit(){
    yourService.getData().subscribe(
        (data)=>{
           this.datasource.data = data;
           this.dataSource.paginator = this.paginator;
                },
        (error)=>{}
       );
    }

---

//请注意，始终在

之后保留
这确实有效！！！非常感谢，这意味着我们必须告诉分页，我们正在使用动态数据？
    dataSource = new MatTableDataSource();
    @ViewChild(MatPaginator) paginator: MatPaginator;
    
    ngOnInit(){
    yourService.getData().subscribe(
        (data)=>{
           this.datasource.data = data;
           this.dataSource.paginator = this.paginator;
                },
        (error)=>{}
       );
    }