Angular 7：分页无法正常工作

Posted 2023-03-29

【中文标题】Angular 7：分页无法正常工作

【英文标题】：Angular 7 : Pagination not working properly

【发布时间】：2019-12-27 07:53:30

【问题描述】：

我的分页有问题。抱歉，我不太明白如何通过将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 分页代码，但我不知道在我的代码中实现。

希望大家能帮忙。

提前致谢

【问题讨论】：

您的示例的链接似乎不正确。

对不起，我已经编辑好了

【参考方案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 ">

【讨论】：

感谢您的回答...但我收到错误ERROR Error: "InvalidPipeArgument:

你能在你创建columnsToDisplay的地方添加代码吗？

columnsToDisplay: string[] = ['select','Name','Status', 'Location.' , 'Date'];

您确定 columnsToDisplay 的长度超过 10 项吗？由于您已将 itemsPerPage 限制为 10 个，因此 pagination 显示多于一页 columnsToDisplay 必须有超过 10 个项目。

是的，它有 9 页。每页 10 个长度。我console.log(total)出来了 9