Material 组件中的分页使用 Angular 5

Question

我正在使用 material 组件 table 来显示数据，并应用排序、过滤和分页。自定义过滤工作正常，我正在关注 link https://v5.material.angular.io/components/table/overview#pagination 但我卡在下面的分页是我的代码。请帮助我做错的地方。

HTML代码

<div class="example-container mat-elevation-z8">


  <div class="example-header">
    <mat-form-field>
      <input matInput type="text" (keyup)="applyComponent($event.target.value)" placeholder="Component" aria-label="Number" [matAutocomplete]="autocom">
    <mat-autocomplete #autocom="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
    </mat-form-field>

    <mat-form-field class="mar-left">
      <input type="text" matInput aria-label="Number" (keyup)="applyRegion($event.target.value)" placeholder="Region" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let region of regions" [value]="region">
            {{ region }}
          </mat-option>
        </mat-autocomplete>
    </mat-form-field>

    <mat-form-field class="mar-left">
      <input matInput (keyup)="applySector($event.target.value)" placeholder="Sector">
    </mat-form-field>

    <!-- <button mat-raised-button color="primary" class="button">Search</button> -->
  </div>


  <mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="no">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="customWidthClass"> No. </mat-header-cell>
      <mat-cell *matCellDef="let grantsearch; let i = index;" class="customWidthClass"> {{i + 1}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="component">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="customWidth"> Component </mat-header-cell>
      <mat-cell *matCellDef="let grantsearch;" class="customWidth"> {{grantsearch.detail.component[0]}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="district">
      <mat-header-cell *matHeaderCellDef mat-sort-header> District </mat-header-cell>
      <mat-cell *matCellDef="let grantsearch;"> {{grantsearch.detail.district[0]}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="organization_name">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Organization </mat-header-cell>
      <mat-cell *matCellDef="let grantsearch;"> {{grantsearch.detail.organization_name[0]}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="region">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="customWidthRegion"> Region </mat-header-cell>
      <mat-cell *matCellDef="let grantsearch;" class="customWidthRegion"> {{grantsearch.detail.region[0]}} </mat-cell>
    </ng-container>


    <ng-container matColumnDef="sector">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Sector </mat-header-cell>
      <mat-cell *matCellDef="let grantsearch;"> {{grantsearch.detail.sector[0]}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="project_title">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Project Title </mat-header-cell>
      <mat-cell *matCellDef="let grantsearch;"> {{grantsearch.detail.project_title[0]}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="action">
      <mat-header-cell *matHeaderCellDef class="customWidthAction"> Action </mat-header-cell>
      <mat-cell *matCellDef="let grantsearch" class="customWidthAction">
        <i class="material-icons onhover"  (click)="open(content,grantsearch.id)">visibility</i>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-paginator #paginator
                [pageSize]="10"
                [pageSizeOptions]="[5, 10, 20]"
                [showFirstLastButtons]="true">
</mat-paginator>

  <ng-template #content let-c="close" let-d="dismiss">

    <div class="section-1">
      <div class="container">
        <div class="modal-header">
          <h4 class="modal-title">Detail</h4>
          <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

          <table class="table table-bordered">
            <thead>
              <tr>
                <th scope="col">Components</th>
                <th scope="col">Organization Name</th>
                <th scope="col">Project Title</th>
                <th colspan="2">Project Description</th>
                <th scope="col">District</th>
                <th scope="col">Region</th>
                <th scope="col">Sector</th>
                <th scope="col">Project start date</th>
                <th scope="col">Project end date</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{singleitem[20].component}}</td>
                <td>{{singleitem[20].organization_name}}</td>
                <td>{{singleitem[20].project_title}}</td>
                <td colspan="2">{{singleitem[20].project_description}}</td>
                <td>{{singleitem[20].district}}</td>
                <td>{{singleitem[20].region}}</td>
                <td>{{singleitem[20].sector}}</td>
                <td>{{singleitem[20].project_start_date}}</td>
                <td>{{singleitem[20].project_end_date}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
        </div>
      </div>

    </div>

  </ng-template>
</div>

starter.component.ts

 @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

    ngOnInit() {

        this.subscription = this.grantsearchservice.getStarterApi()
        .subscribe(
          (grantsearch: any) => {
            this.grantsearchs = grantsearch;
            this.dataSource = new MatTableDataSource(this.grantsearchs);
            console.log(this.grantsearchs);
          }
        );
      }

      applyComponent(filterValue: string) {

        this.subscription = this.grantsearchservice.getComponentSearch(filterValue)
        .subscribe(
          (grantsearch: any) => {
            this.grantsearchs = grantsearch;
            this.dataSource = new MatTableDataSource(this.grantsearchs);
            console.log(this.grantsearchs);
          }
        );

    }  

    applyRegion(filterValue: string) {
      this.subscription = this.grantsearchservice.getRegionSearch(filterValue)
      .subscribe(
        (grantsearch: any) => {
          this.grantsearchs = grantsearch;
          this.dataSource = new MatTableDataSource(this.grantsearchs);
          console.log(this.grantsearchs);
        }
      );
    }

    applySector(filterValue: string) {
      this.subscription = this.grantsearchservice.getSectorSearch(filterValue)
      .subscribe(
        (grantsearch: any) => {
          this.grantsearchs = grantsearch;
          this.dataSource = new MatTableDataSource(this.grantsearchs);
          console.log(this.grantsearchs);
        }
      );
    }
    }

Answer 1

使用这个 link https://stackblitz.com/angular/epvypoerlaq?file=main.ts 希望这能帮助您解决这个问题。

Answer 2

component.html

<mat-paginator #pagination [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = dropDown(component.value,region.value,sector.value,$event)"
    #page>
  </mat-paginator>

component.ts

pageIndex: number = 1;
  pageSize: number = 100;
  pageSizeOptions: number[] = [10, 25, 50, 100];

 setPagination(length, startIndex, pageSize) {
    this.length = length;
    this.pageIndex = startIndex;
    this.pageSize = pageSize;
  }

loadData() {
    this.spinnerService.show();
    this.subscription = this.grantsearchservice.getStarterApi(this.component, this.region, this.sector, this.pageIndex, this.pageSize)
      .subscribe(
        (grantsearch: any) => {
          this.grantsearchs = grantsearch.body;
          this.dataSource = new MatTableDataSource(this.grantsearchs);
          this.totalPageSize = grantsearch.headers.get('X-WP-TotalPages');
          this.setPagination(grantsearch.headers.get('x-wp-total'), this.pageIndex, this.pageSize);
          this.spinnerService.hide();
        }
      );
  }

ngOnInit() {
    this.loadData();
  }

Material 组件中的分页使用 Angular 5

Pagination in Material Component Using Angular 5

angular

angular-material

angular2-forms

angular2-services

angular-material2