MatTableDataSource: невозможно прочитать свойство «длина» неопределенного значения

Я получаю следующую ошибку при использовании таблицы данных углового материала. Я могу получить данные из API, но не могу их отобразить.

Ошибка:

Изображение ошибки

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>

angular angular-material
person Asridh Kumar    schedule 25.09.2018    source источник
comment
где вы получаете доступ к getSearchResult ().? в конструкторе или в ngOnInit ()   -  person Aniket Avhad    schedule 25.09.2018
comment
внутри ngOnInit ()   -  person Asridh Kumar    schedule 25.09.2018
comment
Ваш ответ службы возврата ... Вы проверили?   -  person Aniket Avhad    schedule 25.09.2018
comment
да .. он возвращает ответ правильно   -  person Asridh Kumar    schedule 25.09.2018
comment
вот stackblitz stackblitz.com/edit/angular- scbbxj? file = app / попробуйте сравнить ваш код с этим.   -  person Aniket Avhad    schedule 25.09.2018
comment
Можете ли вы опубликовать здесь какой-нибудь ответ службы   -  person Aniket Avhad    schedule 25.09.2018

Ответы (4)


arrow_upward
9
arrow_downward

Попробуйте поместить dataSource = new MatTableDataSource(); в конструктор:

constructor() {
    dataSource = new MatTableDataSource();
}
person A-Sharabiani    schedule 24.07.2019

arrow_upward
4
arrow_downward

выполнить инициализацию внутри конструктора

this.dataSource.data = [];

ИЛИ

добавьте код подписки внутри конструктора

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

arrow_upward
2
arrow_downward

Пожалуйста, попробуйте этот код:

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

person Amol B Lande    schedule 25.09.2018
comment
при использовании вышеупомянутой ошибки ошибка исчезла, но данные не отображаются в поле зрения .. Нужно ли мне также изменить что-либо в поле зрения ??? - person Asridh Kumar; 25.09.2018
comment
Я неправильно назвал свойство .. это не отображается в поле зрения .. теперь он работает нормально .. но пагинатор не работает ?? какой-либо причине?? - person Asridh Kumar; 25.09.2018
comment
да. Вам необходимо объявить пагинатор @ViewChild (MatPaginator): MatPaginator; Затем напишите this.dataSource.paginator = this.paginator; - person Amol B Lande; 25.09.2018
comment
Привет, Асрид, если решение вам поможет. Пожалуйста, нравится. - person Amol B Lande; 01.10.2018

arrow_upward
0
arrow_downward

Ошибка возникает из-за того, что таблица еще не инициализирована при попытке доступа к данным. Обычно также происходит, когда вы пытаетесь отобразить строки до инициализации таблицы. Чтобы решить эту проблему, попробуйте запустить

Это должно решить проблему:

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.

person Simone Solfato    schedule 27.02.2019