如何将数值从后端传递到 angular 前端中的变量

Question

我是 angular 的新手，我遇到的这个问题一开始看起来很简单！

我正在尝试实现这个 angular material 分页器：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 的实现，它与 angular material 示例中的相同

<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>

如果有任何想法、建议或示例，我将不胜感激。

Answer 1

您正在更改 totalLength 的值并错误地假设它连接到 length 属性（只是因为您初始化了 length = this.totalLength）。这种方法可以在工作表中使用，但在这里绝对行不通。您没有在初始化时传递对 length 的引用，只是一个值。因此，如果您执行以下操作，它将起作用：

filterMessages(params: Params) {
  this.service.getMessages(params)
    .subscribe(
      values => {
        this.length = values.totalElements;
        ...
      }, 
      error => {...}
    );
}

如何将数值从后端传递到 angular 前端中的变量

How to pass numeric value from backend to a variable in angular frontend

paginator

angular