根据我的要求定制角材料的分页器组件

时间:2019-04-30 07:05:26

标签: angular angular-material angular7 mat-table

在我的应用程序中,有一个组件使用角物料表填充行。 由于实现了服务器端分页,并且在下面给出了json响应。

list-包含表记录的对象。
nextfirstlastprevious-这些对象链接将提供下一页/第一页/上一页/最后一页数据。

我需要将nextfirstlastprevious的值分配给有角度的材质分页按钮。

Material Pagination <code>showFirstLastButtons</code>

是否可以自定义分页按钮? 请给我一些建议。

JSON响应:

{  
list: [],  
totalRecords: 100,  
message: "Patient search successfull",  
next: "http://localhost:8084/findPatient/?page=2&size=10&patientId=&patientFirstName=&patientLastName=",  
first: "http://localhost:8084/findPatient/?page=0&size=10&patientId=&patientFirstName=&patientLastName=",  
last: "http://localhost:8084/findPatient/?page=9&size=10&patientId=&patientFirstName=&patientLastName=",  
previous: "http://localhost:8084/findPatient/?page=0&size=10&patientId=&patientFirstName=&patientLastName=",  
size: 10,  
currentPage: 1
}

使用Angular 7和Spring Boot构建的Web应用程序。由于我是Angular的新手,所以我不知道创建用于分页的自定义指令。

1 个答案:

答案 0 :(得分:0)

您可以使用counter = 0 P_Size = [] P_Size_Cost = dict() while counter < P_Ammount: size = input("Enter A Size S= Small M= Meduim L= Large ") P_Size.append(size) if P_Size[counter] == "S" or P_Size[counter] == "s": # both types of valadation for Lower and upper case P_Size_Cost[counter] = 3.25 #Setting Price To List for Small if P_Size[counter] == "M" or P_Size[counter] == "m": P_Size_Cost[counter] = 5.50 #Setting Price To List for Meduim if P_Size[counter] == "L" or P_Size[counter] == "l": P_Size_Cost[counter] = 7.15 #Setting Price To List for Large counter = counter + 1 来控制分页器行为

PageEvent
<mat-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="onPageEvent($event)">
</mat-paginator>