CODEWITHSUNDEEP
angularangular-material
Skeptical Ant
Skeptical Ant

Reputation: 384

Undefined paginator when setting it to the mat table data source

I have this code which initializes a material datasource by data returned from the server

@ViewChild('paginatorFatora') paginatorFatora: MatPaginator;
  fatorasDs: MatTableDataSource<Fatora>;


 this.productService.getFatoraListById(element.id).subscribe((e: Fatora[]) => {
   
      this.fatorasDs = new MatTableDataSource(e);
      this.fatorasDs.paginator = this.paginatorFatora;
       console.log(this.fatorasDs.data);
     console.log(this.fatorasDs.paginator);
 
    })

this is the output of the first print which means it is defined and the response was a success

0:
agent: 2
fatoraTotalPrice: "263.00"
fatora_at: "2020-12-22"
id: 4
moneyPaid: "32.00"
transportCost: "34.00"
userAuth: 1

and the second one gives me an undefined and below is the html

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

          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> # </th>
            <td mat-cell *matCellDef="let row;  let i = index;">
              {{paginatorFatora.pageIndex * paginatorFatora.pageSize + i + 1}}

            </td>
          </ng-container>


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

          <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="4" *ngIf="input.value!==''">"{{input.value}}" Does not exist in the table</td>
          </tr>

        </table>

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

I don't know where the problem lays.

Upvotes: 1

Views: 2042

Answers (1)

Eliseo
Eliseo

Reputation: 58099

"when we assign the paginator, the paginator must be accessible."

What I want to say with this?

If we asign the paginator in ngOnInit we only can do it if our paginators is NOT under a *ngIf and using the parameter {static:true} in viewChild

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

If the paginator is under a *ngIf we need first set visible and, after, in a "new round" assign it. This "new round" it's only use a setTimeout. e.g.

<div *ngIf="variable">
   <mat-paginator #paginatorFatora...>
</div>

 //Not use {static:true}
 @ViewChild('paginatorFatora') paginatorFatora: MatPaginator;

..when something...
this.variable=true;
setTimeout(()=>{
  this.fatorasDs.paginator = this.paginatorFatora; 
})

Typical case is when we subscribe to a service to get data,and only show the table if there are data

<div *ngIf="factoraDs else #loading">
 <table mat-table [dataSource]="fatorasDs" class="mat-elevation-z8">
   ....
 </table>
 <mat-paginator #paginatorFatora...>
</div>
<ng-template #loading>
  loading...
</ng-template>

 this.myservice.getData(res=>{
    this.factoraDs=new MatTableDataSource(res)
    setTimeout(()=>{
       this.fatorasDs.paginator = this.paginatorFatora; 
    })
 })

Futhermore, if we asign to this.factoraDs a new MatDataSource, we need again assign the paginador

Upvotes: 3

Related Questions