如何在Angular中的資料表中使用材料分頁器？

我試圖讓Angular Material的pager在一個資料來自服務的表格中發揮作用。我已經按照Angular Material檔案中的幾個教程進行了操作，但尋呼機并沒有作業

html組件的代碼：

我想讓Angular Material的尋呼機在一個資料來自服務的表格中發揮作用。

html組件的代碼：

 <div>
    < table mat-table [dataSource]="dataSource" class="mat-elevation-z8 table-left"> 

              < ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns" > 
              < th id="head" mat-header-cell *matHeaderCellDef> {{column}}. </th> {{column}}

              <ng-container *ngIf="column != 'cities'; else optionsTemplate"/span>>
                   <td mat-cell *matCellDef="let element">/span> {{element[umn]}}. </td> {{element[column]}}.
              </ng-container>/span>
        
              <ng-template #optionsTemplate>/span>
                < td mat-cell *matCellDef="let element" class="action-link"> 
                     <button mat-raised-button (click)="loadCity（元素。 idDepartment)">Cities</button> 
                </td>/span>
              </ng-template>/span>
          </ng-container>/span>

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

    < table mat-table [dataSource]="dataSourceCity" class="mat-elevation-z8"> 
        < ng-container [matColumnDef]=" column" *ngFor="let column of displayedColumnsC"> 
          < th id="head" mat-header-cell *matHeaderCellDef> {{column}}. </th> {{column}}
          <td mat-cell *matCellDef="let element">/span> {{element[umn]}}. </td> {{element[column]}}.
        </ng-container>/span>

        <tr mat-header-row *matHeaderRowDef="columnsToDisplayC"/span>> </tr>>
        <tr mat-row *matRowDef="let row; columns: columnsToDisplayC;"></tr>
    </table>
    < mat-paginator [pageSizeOptions]=" [5, 10, 20]" showFirstLastButtons> </mat-paginator> 
 </div>

來自ts組件的代碼：

import { Component, OnInit, ViewChild}。from '@angular/core'。
import { MatPaginator } from '@angular/material/paginator'。
import { MatTableDataSource } from '@angular/material/table'/span>。
import { DepartmentService } from '././_service/department.service'。
import { Department } from 'src/app/_model/department' ;

@Component（{
   selector: 'app-search',
   templateUrl: './search.component.html',
   styleUrls: ['./search.component.css'] 。
})
export class SearchComponent 實作 OnInit {
      displayedColumns: string[] = ['idDepartment', 'name', ' cities'];
      columnsToDisplay: string[] = this.displayedColumns.slice() 。
      depList: Department[] = [] 。
      dataSource = [];
      
      displayedColumnsC: string[] = ['idCity'/span>, 'name'/span>];
      columnsToDisplayC: string[] = this.displayedColumnsC.slice() 。
      cityList: any[] = [] 。
      dataSourceCity = new MatTableDataSource(this.cityList) 。

      @ViewChild(MatPaginator) paginator。MatPaginator;

      constructor（private departService: DepartmentService） { }
      
      ngOnInit（）。void {
            this.dataSourceCity.paginator = this.paginator。

            this.depList = []。
            this.departService.list（）。 subscribe(data =>  {
                 data.forEach(element => {
                 this.depList.push({idDepartment: element。 idDepartment, name: element.name}）。)
                });
                this.dataSource = this.depList;
            });
      }

      loadCity（idDepartment）。void {
            this.departService.listCities（idDepartament）。 subscribe(data =>  {
            data.forEach(element => {
                 this.cityList.push({idCity: element. idCity, name: element.name}）。)
            });
            this.dataSourceCity.data = this.cityList;
            console.log(this.dataSourceCity) 。
      });
      this.dataSourceCity.data = [] 。
      this.cityList = []。
   }
}

資料正確地顯示在表格中，但分頁器不作業，就好像資料源沒有被分頁器 "檢測 "出來。

uj5u.com熱心網友回復：

你必須在定義了資料源之后再指定分頁器：

loadCity（idDepartment）。void { this.departService.listCities（idDepartament）。 subscribe((data) =>/span> { data.forEach((element) =>/span> { this.cityList.push({ idCity: element. idCity, name: element.name }）。) }); this.dataSourceCity.data = this.cityList; this.dataSourceCity.paginator = this.paginator. console.log(this.dataSourceCity) 。 }); this.dataSourceCity.data = [] 。 this.cityList = []。 }

標籤：

上一篇：在Django/React專案設定中，Favicon和manifest.json沒有加載。

下一篇：不能讀取未定義的屬性（讀取'checked'）。