0 votes
in Programming by (580 points)

I'm trying to implement Mat-Paginator to my table. My table is filled with data from API and it seems that the data is loaded after ther paginator and beacuse of that my paginator doesn't work. Someone have a solution ?

Service.ts :

private URL = "https://xxxxxxxxxxxxx";
  getAccount() {
    let json = {    
    "login_id": "xxxx",
    "login_hash": "xxxx",
    "login_company": "x"}
    let body = JSON.stringify(json);
    return this.http.post<any>(this.URL, body)
  }
  
  constructor(private http: HttpClient) { }
}

Account.ts :

resp;
  ELEMENT_DATA: Account[] = [];
  displayedColumns: string[] = ['name', 'email','phone','address','city'];
  dataSource = new MatTableDataSource<Account>(this.ELEMENT_DATA);
  @ViewChild(MatPaginator,{static:true}) paginator:MatPaginator;

  getAccountData(){
    this.resp = this.accountService.getAccount().subscribe(
      data => this.dataSource = new MatTableDataSource<Account>(data.body as Account[]))
  }

  constructor(private accountService:AccountService) { }

  ngOnInit(): void {
    this.dataSource.paginator = this.paginator;
    this.getAccountData();
    console.log(this.dataSource);
  }
}

Account.html : (because of the code limit I put only one column here)

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!-- Name -->
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element">
            <span> {{element.name}} </span>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

Thank you.

Please log in or register to answer this question.

...