Angular 7：分页无法正常工作

Question

我的分页有问题。抱歉，我不太明白如何通过将this.total = res.totalPage;from Component 传递给 Service 使其计数页面来使其按预期工作。因为它现在只显示 1 页只有“image reference”。下面我提供html、Component和Service代码，方便大家理解。 在html代码中，我只显示部分分页。

HTML

    <table
      mat-table
      [dataSource]="dataSource"
      matSort
      multiTemplateDataRows
      class="mat-elevation-z8-"
    >
    <ng-container
        matColumnDef="{{ column }}"
        *ngFor="let column of columnsToDisplay | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }"
      ><!-- -->
      <ng-container *ngIf="column === 'select'; else notSelect">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)"
                        >
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container *ngIf="column.length == 11"  matColumnDef="name"><!---->
        <th mat-header-cell *matHeaderCellDef mat-sort-header><strong>{{ column }}</strong></th>
      </ng-container>
      <ng-container #headerSort><!---->
        <th mat-header-cell *matHeaderCellDef><strong>{{ column }}</strong></th>
      </ng-container>
        <td
          mat-cell
          *matCellDef="let element"
          (click)="open(element)"
          class="pointer"
        >
        <p>
         {{element.name}}
         </p>
         <p *ngIf="column.length == 7">
            {{element.location}}
          </p>
          <p *ngIf="column.length == 6">
              {{element.status}}
          </p>
          <p *ngIf="column.length == 8">
            {{date}}
        </p>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr
        mat-row
        *matRowDef="let element; columns: columnsToDisplay"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"

      ></tr>

      <tr
        mat-row
        *matRowDef="let item; columns: ['expandedDetail']"
        class="example-detail-row"
      ></tr>
    </table>
    <pagination-controls (pageChange)="loadAgents($event)" id="server"></pagination-controls>

组件

ngOnInit() {
    this.getPage(1);
}

getPage(page: number) {
  this.allService.getAllService(pageIndex).subscribe(res =>{
  this.dataSource = new MatTableDataSource<AllDetails>(res['allList']);

  this.total = res.totalPage;
  console.log(this.total)
  this.p = pageIndex;
  this.dataSource.sort = this.sort;

 }
}

服务

getAllService(page:number): Observable<any>  {
    console.log("TEST page back" +page)
    const urls: string = `http://192.168.0.101:9080/project/api/listall/${orgId}`
   const requestUrl: string = `${urls}/${page + 1}/desc`;

    return this.http.get<AllDetails>(requestUrl).pipe(map(res => {
      return {
        allList: res['allList'],
        noPage: res['noPage'],
        totalPage: res['totalPage']
      };
  }));

  }

noPage: res['noPage']部分参考当前页面。

我有example 分页代码，但我不知道在我的代码中实现。

希望大家能帮忙。

提前致谢

Answer 1

尝试改变

<ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay | 
  paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }">

到

<ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay | 
async | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }">