CODEWITHSUNDEEP
angulartypescript
Manisha
Manisha

Reputation: 195

ERROR TypeError: Cannot set property 'paginator' of undefined error is showing

I am able to display the record on my mat table, due to lots of records i want to set limit of records to show, so i have used mat paginator. But it is not working

vendoraction.component.html

<div class="purchases-style">
    <div>
        <table mat-table [dataSource]="displayvendors" class="mat-elevation-z1">
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> Vendor ID </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="changeColumn">
            <th mat-header-cell *matHeaderCellDef> Change Column </th>
            <td mat-cell *matCellDef="let element"> {{element.changeColumn}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['id','changeColumn'"></tr>
        <tr class="rowhover" (click)="displayData(row.id)" mat-row *matRowDef="let row; columns: ['id','changeColumn']"></tr>
        </table>

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

     <router-outlet></router-outlet>

</div>

vendor-action.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource, MatPaginator} from '@angular/material';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

import { ApiService } from 'src/app/api.service';
import { Displayvendor } from './displayvendor';



@Component({
  selector: 'app-vendor-action',
  templateUrl: './vendor-action.component.html',
  styleUrls: ['./vendor-action.component.css']
})
export class VendorActionComponent {

  displayvendors : any
  constructor(private router:Router,public apiService:ApiService){}
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit()
  {
    this.apiService.userList().subscribe(displayvendors=> 
      {
        this.displayvendors=new MatTableDataSource(displayvendors); 
      });

      this.displayvendors.paginator=this.paginator;
  }

  displayData(id)
  {
    this.router.navigate(["/home/vendor-action/approval",id]);
  }
}

And i am getting error:

ERROR TypeError: Cannot set property 'paginator' of undefined

Upvotes: 0

Views: 2305

Answers (2)

Ashish Mishra
Ashish Mishra

Reputation: 534

Try to put it in subscribe method like this:

ngOnInit()
  {
    this.apiService.userList().subscribe(displayvendors=> 
      {
        this.displayvendors=new MatTableDataSource(displayvendors); 
        this.displayvendors.paginator=this.paginator;
      });
  }

Upvotes: 1

Sagar Dhawan
Sagar Dhawan

Reputation: 47

Try setting the paginator option for displayvendors inside the subscribe method. The api call is asynchronous so the object is empty when you try to set the paginator property for it.

ngOnInit()
  {
    this.apiService.userList().subscribe(displayvendors=> 
      {
        this.displayvendors=new MatTableDataSource(displayvendors); 
        this.displayvendors.paginator=this.paginator;
      });
  }

Upvotes: 1

Related Questions