CODEWITHSUNDEEP
angularangular-material
Asridh Kumar
Asridh Kumar

Reputation: 525

MatTableDataSource : cannot read property 'length' of undefined

Im getting following error while using angular material data table. i am able to get the data from api but cannot render it in view.

Error:

error Image

TS:

      dataSource = new MatTableDataSource();  
      displayedColumns: string[] = ["Part#", "Description"];      
      getSearchResult() {
         let params = {
             ParentCategoryID: 0,
             CategoryID: 0,
             ManufacturerID: 0,  
       };
        this._httpService.getSearchResult(params).subscribe((resp: any) => {
        this.searchResult = resp;
        this.dataSource.data = this.searchResult;                 
       });
    }

View:

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

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

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

Upvotes: 17

Views: 27975

Answers (5)

Yohann Daniel Carter
Yohann Daniel Carter

Reputation: 975

Your dataSource is not initialized yet. When you initialized your dataSource, you can do something like this :

dataSource: MatTableDataSource = [];

OR

dataSource = new MatTableDataSource([]);

Regards,

Upvotes: 2

Srinivasan N
Srinivasan N

Reputation: 683

make initialisation inside constructor

this.dataSource.data = [];

OR

add the subscribe code inside constructor

constructor(private _httpService: imported service name) {this._httpService.getSearchResult(params).subscribe((resp: any) => {
    this.searchResult = resp;
    this.dataSource.data = this.searchResult;                 
   });}

Upvotes: 6

A-Sharabiani
A-Sharabiani

Reputation: 19377

Try putting dataSource = new MatTableDataSource(); inside the Constructor:

constructor() {
    dataSource = new MatTableDataSource();
}

Upvotes: 14

Simone Solfato
Simone Solfato

Reputation: 129

The error occur because the table is not already initialized when you try to access to the data. Usually occurs also when you try to render the rows before the table is initialized. To solve it try to run

This should solve the problem:

TS:

dataSource = any[];  
displayedColumns: string[] = ["Part#", "Description"];      
getSearchResult() {
   let params = {
      ParentCategoryID: 0,
      CategoryID: 0,
      ManufacturerID: 0,  
   };
   this._httpService.getSearchResult(params).subscribe((resp: any) => {
      this.searchResult = resp;
      this.dataSource = this.searchResult;                 
   });
}

At least try to put the code after the view is initialized in ngAfterContentInit.

Upvotes: 1

Amol B Lande
Amol B Lande

Reputation: 252

Please try this code:

this.dataSource= new MatTableDataSource(this.searchResult);

Upvotes: 2

Related Questions