16

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>
6

5 Answers 5

14

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

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

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;                 
   });}
2

Please try this code:

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

4
  • by using the above the error is gone but the data is not rendered in view..Do i need to change anything in view as well ??? Sep 25, 2018 at 10:09
  • i got a property name wrong ..thats y its not rendered in view..its working fine now..but paginator is not working ?? any reason?? Sep 25, 2018 at 10:23
  • Yes. You need to declare @ViewChild(MatPaginator) paginator: MatPaginator; Then write this.dataSource.paginator = this.paginator; Sep 25, 2018 at 11:02
  • Hi Asridh,If solution help you. Please like. Oct 1, 2018 at 11:09
1

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

dataSource: MatTableDataSource = [];

OR

dataSource = new MatTableDataSource([]);

Regards,

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.