我对angular非常陌生,这个问题一开始看起来很简单!
我正在尝试实现这种有角度的材料分页器:https://material.angular.io/components/paginator/examples
在此组件中,我使用方法filterMessages
从后端获取数据。
现在,在这些数据中,有元素总数(分页器的长度),我使用values.totalElements
获得了该元素。我将此值分配给totalLength
变量。
我现在想用这个新值更新分页器的lentgh
。
export class MessageComponent {
constructor(...) {
}
totalLength: number;
filterMessages(params: Params) {
this.service.getMessages(params).subscribe(values => { // getMessages gets the data from the backend
this.totalLength = values.totalElements // here I get an value
values = values.content;
...
}, error => {
...
});
}
// MatPaginator Inputs
length = this.totalLength; // I want to update this with the value from the backend
pageSize = 10;
pageSizeOptions: number[] = [];
// MatPaginator Output
pageEvent: PageEvent;
}
这是.html的实现,与角材料示例中的相同。
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageEvent = $event">
</mat-paginator>
<div *ngIf="pageEvent">
<h5>Page Change Event Properties</h5>
<div>List length: {{pageEvent.length}}</div>
<div>Page size: {{pageEvent.pageSize}}</div>
<div>Page index: {{pageEvent.pageIndex}}</div>
</div>
任何想法,建议或示例,我将不胜感激。
答案 0 :(得分:1)
您正在更改totalLength
的值,并错误地假设它已连接到length
属性(只是因为您初始化了length = this.totalLength
)。这种方法可以在工作表中工作,但在这里肯定行不通。您不会在初始化时传递对length
的引用,而只是传递一个值。因此,如果您执行以下操作,它将起作用:
filterMessages(params: Params) {
this.service.getMessages(params)
.subscribe(
values => {
this.length = values.totalElements;
...
},
error => {...}
);
}