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>

回答1:

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

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

回答2:

Please try this code:

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

回答3:

make initialisation inside constructor

this.dataSource.data = [];

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

回答4:

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.

来源：https://stackoverflow.com/questions/52494919/mattabledatasource-cannot-read-property-length-of-undefined

标签

angular

angular-material