Как передать числовое значение c из бэкэнда в переменную в angular интерфейсе - PullRequest
Новая
       48

Как передать числовое значение c из бэкэнда в переменную в angular интерфейсе

0 голосов
/ 22 апреля 2020

Я очень новичок в angular, и у меня есть проблема, которая вначале выглядела просто!

Я пытаюсь реализовать этот angular paginator: https://material.angular.io/components/paginator/examples

В этом компоненте я получаю данные из бэкэнда методом filterMessages. Теперь, в этих данных есть общее количество элементов (длина для paginator) , которое я получаю, используя 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 примере материала 

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

Буду признателен за любую идею, предложение или пример.

1 Ответ

1 голос
/ 22 апреля 2020

Вы меняете значение totalLength и ошибочно полагаете, что оно связано с атрибутом length (только потому, что вы инициализируете length = this.totalLength). Этот подход может работать на листе, но определенно не работает здесь. Вы не передаете ссылку на length при инициализации, просто значение. Так что это будет работать, если вы сделаете что-то вроде: 

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