Html 如何在有角度的页面中进行分页？

我使用getUsers API从后端获取数据，然后使用mat table显示值。我试图只为前端添加分页器，但这不起作用。我是否也需要在allUsers API中添加分页器逻辑？请帮助我编辑下面的代码以启用分页

诱惑者API

public List<User> allUserss() {
        Query q = entityManager.createQuery("SELECT u FROM User u");
        return (List<User>) q.getResultList();
    }

公开名单{
Query q=entityManager.createQuery（“从用户u中选择u”）；
返回（列表）q.getResultList（）；
}

打字稿

export class GadgetSearchFormComponent implements OnInit {

  users:any;
  
  user:User= new User(0,"","","");
  firstName:string;
  lastName:string;
  gender:string;
 
  ELEMENT_DATA: User[];
 
  displayedColumns: string[]=['firstName' ,'dob' ,'gender',];
  datasource;
  filterForm: FormGroup;
 
 
  constructor(private service: GadgetTracerLogService, private route:ActivatedRoute, private router:Router, private fb:FormBuilder,private dialog: MatDialog) {
    this.filterForm = this.fb.group({
      
       firstName: [''],
       lastName: [''],
      
       gender: ['']
      
 
     });
  }

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

  ngOnInit() {
   
    
    this.datasource=new MatTableDataSource<User>(this.ELEMENT_DATA);
    
    this.filterForm.get("firstName").setValue(null);
    this.filterForm.get("lastName").setValue(null);
    this.filterForm.get("gender").setValue(null);
    
      this.getUsers();
    
  }
  
  
 public getUsers(){
 
  
  let resp=this.service.getUsers();
  
        resp.subscribe(report=>this.datasource=report as User[]);      
 }

}

导出类GadgetSearchFormComponent实现OnInit{
用户：任何；
用户：用户=新用户（0、“”、“”、“”）；
名字：字符串；
lastName:string；
性别：弦；
元素_数据：用户[]；
显示的列：字符串[]=['firstName'，'dob'，'gender'，]；
数据源；
filterForm：FormGroup；
构造函数（专用服务：GadgetTracerLogService，专用路由：ActivatedRoute，专用路由器：router，专用fb:FormBuilder，专用对话框：MatDialog）{
this.filterForm=this.fb.group({
名字：['']，
姓氏：['']，
性别：['']
});
}
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
恩戈尼尼特（）{
this.datasource=新MatTableDataSource（this.ELEMENT_DATA）；
this.filterForm.get（“firstName”）.setValue（null）；
this.filtermber.get（“lastName”）.setValue（null）；
this.filtermber.get（“性别”）.setValue（null）；
这是getUsers（）；
}
公共getUsers（）{
让resp=this.service.getUsers（）；
resp.subscribe（report=>this.datasource=报告为用户[]）；
}
}

html

全名
{{element.firstName}{{element.lastName}}
姓
{{element.lastName}
性别
{{element.gender}
{{searchResultMessage}}

您没有将分页器与数据源连接起来

将其替换为TS中的viewChild

@ViewChild('paginator') paginator: MatPaginator;

在ngOnInIt中初始化dataSource后，必须将dataSource与paginator引用连接起来，如：

 ngOnInit() {         
 this.datasource=new MatTableDataSource<User>(this.ELEMENT_DATA);
 this.datasource.paginator = this.paginator;
 }

ngOnInit（）{
this.datasource=新MatTableDataSource（this.ELEMENT_DATA）；
this.datasource.paginator=this.paginator；
}

---

只要做这些更改，如果有任何疑问，请随时询问我。

在subscribe中，您可以创建数据源并指定分页，但请记住，您需要创建MatTableDataSource

resp.subscribe(report=>{
  //see that teh dataSource is a "MatTableDataSource", not the array 
  this.datasource=new MatTableDataSource<User>(report);
  this.dataSource.paginator = this.paginator;
});   

resp.subscribe（报告=>{
//请注意，数据源是“MatTableDataSource”，而不是数组
this.datasource=新MatTableDataSource（报告）；
this.dataSource.paginator=this.paginator；
});   

当我使用此代码时，它表示“Object”类型的参数不可分配给“User[]”类型的参数。制作一个

控制台.log（report）

要知道您收到的值是多少，您可能收到了，例如

{data:[…，…]}

，因此，在这种情况下，您需要使用

新的MAtTableDataSource创建MatTableData（report.data）；

paginator不工作..dataSource.paginator应该是“dataSource.paginator”对吗？哎呀，我的错，它是“dataSource”，答案编辑。

resp.subscribe(report=>{
  //see that teh dataSource is a "MatTableDataSource", not the array 
  this.datasource=new MatTableDataSource<User>(report);
  this.dataSource.paginator = this.paginator;
});