title: MatTableDataSource : cannot read property 'length' of undefined
body: <p>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.</p>
  
  <p><strong>Error:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/CjT7x.jpg" rel="noreferrer">error Image</a></p>
  
  <p><strong>TS:</strong></p>
  
  <pre><code>      dataSource = new MatTableDataSource();  
        displayedColumns: string[] = ["Part#", "Description"];      
        getSearchResult() {
           let params = {
               ParentCategoryID: 0,
               CategoryID: 0,
               ManufacturerID: 0,  
         };
          this._httpService.getSearchResult(params).subscribe((resp: any) =&gt; {
          this.searchResult = resp;
          this.dataSource.data = this.searchResult;                 
         });
      }
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>    &lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8"&gt; 
          &lt;ng-container matColumnDef="Part#"&gt;
             &lt;th mat-header-cell *matHeaderCellDef&gt; Part# &lt;/th&gt;
             &lt;td mat-cell *matCellDef="let element "&gt; {{element.PartCode}}            
            &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="Description"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Description &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element "&gt; 
                {{element.DiagramDescription}} &lt;/td&gt;
           &lt;/ng-container&gt;    
  
          &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
        &lt;/table&gt;
  </code></pre>