MatTableDataSource:无法读取未定义的属性'长度'-角材料

时间:2018-09-25 09:32:43

标签: angular angular-material

使用角度材料数据表时出现跟随错误。我能够从api获取数据,但无法在视图中呈现它。

错误:

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

查看:

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

4 个答案:

答案 0 :(得分:0)

请尝试以下代码:

transaction.Save(String.Format("{0}", executedUpdates)); Actions? action = null; foreach (XmlNode statement in update.ChildNodes) { if (action != null && action.HasValue && action.Value == Actions.Skip_Update) break; using (SqlCommand cmd = new SqlCommand(statement.InnerText, connection, transaction)) { try { cmd.ExecuteNonQuery(); } catch (Exception e) { // Transaction already rollbacked // Get input what to do with error action = await Executor.HandleError(); // Handle switch (action) { case Actions.Skip_Statement: // Carry on with next statement break; case Actions.Skip_Update: // Rollback to before this batch transaction.Rollback(String.Format("{0}", executedUpdates)); break; case Actions.Commit_And_Stop: // Commit and stop transaction.Commit(); return true; case Actions.Rollback: // Rollback and stop transaction.Rollback(); return true; } } } }

答案 1 :(得分:0)

发生错误是因为尝试访问数据时表尚未初始化。 当您尝试在初始化表之前呈现行时,通常也会发生。 要解决它,请尝试运行

这应该可以解决问题:

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

至少要在ngAfterContentInit中初始化视图之后尝试放置代码。

答案 2 :(得分:0)

尝试将dataSource = new MatTableDataSource();放入构造函数中:

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

答案 3 :(得分:0)

在构造函数中进行初始化

this.dataSource.data = [];

OR

在构造函数中添加订阅代码

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