Question

我获得了从api获取的100多个用户的列表。现在，我想在角度材质表中实现该数据。

在前端，我是否可能仅在pageSize中显示10个用户并具有分页功能。我尝试过，但是即使我已实现分页模块，它也会显示所有可用的用户。

<mat-paginator [pageSize]="10" showFirstLastButtons></mat-paginator>

在打字稿代码中，我从父组件中获取列表。

import {Component, OnInit, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit, OnChanges {
  @Input() users;

  displayedColumns = ['name', 'id'];
  dataSource;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor() { }

  ngOnChanges() {
    this.dataSource = new MatTableDataSource<any>(this.users);
  }

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

感谢您的帮助。谢谢

Answer 1

无论如何我都成功了。将分页器放入ngOnChanges

ngOnChanges() {
    this.dataSource = new MatTableDataSource<any>(this.users);
    this.dataSource.paginator = this.paginator;
}

Answer 2

确实不需要使用ngOnChanges，但是如果使用，则需要在ngOnChanges中也要分配datasource.paginator 。

此外，在分配数据源时，请考虑分页器是否可见。

如果在ngOnInit中使用，则需要使用static：true

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

但是请记住，在这种情况下，分页器不能位于* ngIf下，否则请使用ngAfterViewInit

顺便说一句，如果您可以访问API或分页器在服务器上-而不是在前端，则可以查看this SO

从api

2 个答案: