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

问题描述

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

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

标签： angularpaginator

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

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

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

问题描述

解决方案

推荐阅读