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

Question

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

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

Answer 1

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

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