没有垫表的垫分页

Question

我一直在尝试对不使用 mat-table 的结果列表实施 mat-pagination。 但是，我在这里找到的所有示例都使用带有分页的 mat-table。

感谢您对此的帮助。

我目前正在从 onInit 上的解析器获取所有数据，并且每次用户与分页交互时都不需要从后端获取数据。

组件.html

<div class="axi-results-wrapper">
    <mat-accordion>
      <ng-container *ngFor="let process of Processes; let i = index;">
        <mat-expansion-panel (opened)="setOpened(i)"
                             (closed)="setClosed(i)" hideToggle="true">
          <mat-expansion-panel-header [collapsedHeight]="'66px'" [expandedHeight]="'60px'">
            <div *ngIf="currentlyOpenedItemIndex !== i" class="row axi-results-row">
              <span class="col-md-4 axi-results-row__txt">
                <div class = "axi-result-circle axi-result-circle--bg-color">
                  <i class="far fa-copy"></i>
                </div>
                <div class="axi-results-row__txt axi-results-row__txt--primary">{{process.name}}</div>
              </span>
              <span class="col-md-3 axi-results-row__txt axi-results-row__txt--secondary">{{process.repoUrl}}</span>
              <span class="col-md-3 axi-results-row__txt axi-results-row__txt--secondary">{{process.processType}}</span>
              <span class="col-md-2 axi-results-row__txt axi-results-row__icon" *appHasAccess="roleTitle">
                <span (click)="editProcess(process, i); $event.stopPropagation();">
                  <i class="material-icons">edit</i>
                </span>
                <span (click)="deleteProcess(process.id, i); $event.stopPropagation()">
                  <i class="material-icons">delete_outline</i>
                </span>
              </span>
            </div>
            <div *ngIf="currentlyOpenedItemIndex === i">
              <app-result-header [iconType]="type" [headerName]="process.name" (editData)="editProcess(process, i)" (deleteFunc)="deleteProcess(process.id, i)"></app-result-header>
            </div>
          </mat-expansion-panel-header>
          <app-process-detail-view [process]="process"></app-process-detail-view>
        </mat-expansion-panel>
      </ng-container>
    </mat-accordion>

    <mat-paginator [length]="length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="[5, 10, 25, 100]">
    </mat-paginator>
  </div>

组件.ts

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; 

  constructor(private actr: ActivatedRoute) { }

  ngOnInit() {
    this.getProcessService();
  }

  getProcessService() {
    // Getting all the data fetched from the active route
    this.actr.data.subscribe((res) => {
      this.Processes = res.process;
    });
  }

Answer 1

mat-paginator 与其他组件一样，具有inputs和outputs 。 您使用[name of property]和 outputs (name of output)="yourFunction($event)"控制输入

在文档中查看

所以你可以使用，例如

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="change($event)">
</mat-paginator>

change(event:PageEvent)
{
    //make something
    console.log(event.length);
    console.log(event.pageIndex);
    console.log(event.pageSize);
    console.log(event.previousPageIndex)
    //possible call to a function in a service to get data from one index to another one
    this.obs$=this.data.service.getItems(event.previousPageIndex*event.pageSize,
           event.PageIndex*event.pageSize               
    )
}

Answer 2

或者，您可以通过将 ng-container 放在一个表中来节省所有这些努力，只有一个<tr>和一个<td> 。