MatTableDataSource : tidak dapat membaca properti 'panjang' yang tidak ditentukan

Saya mendapatkan kesalahan berikut saat menggunakan tabel data material sudut. saya bisa mendapatkan data dari api tetapi tidak bisa menampilkannya.

Kesalahan:

gambar kesalahan

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

Tampilan:

    <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 sumber
comment
di mana Anda mengakses getSearchResult().? pada konstruktor atau pada ngOnInit()   -  person Aniket Avhad    schedule 25.09.2018
comment
di dalam ngOnInit()   -  person Asridh Kumar    schedule 25.09.2018
comment
Apakah pelayanan return anda respon..Sudahkah anda memeriksanya?   -  person Aniket Avhad    schedule 25.09.2018
comment
ya..itu mengembalikan respons dengan benar   -  person Asridh Kumar    schedule 25.09.2018
comment
berikut adalah stackblitz stackblitz.com/edit/angular- scbbxj?file=app/ coba bandingkan kode Anda dengan ini.   -  person Aniket Avhad    schedule 25.09.2018
comment
dapatkah Anda memposting beberapa tanggapan layanan di sini   -  person Aniket Avhad    schedule 25.09.2018

Jawaban (4)


arrow_upward
9
arrow_downward

Coba masukkan dataSource = new MatTableDataSource(); ke dalam Konstruktor:

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

arrow_upward
4
arrow_downward

melakukan inisialisasi di dalam konstruktor

this.dataSource.data = [];

ATAU

tambahkan kode berlangganan di dalam konstruktor

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

Silakan coba kode ini:

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

person Amol B Lande    schedule 25.09.2018
comment
dengan menggunakan cara di atas kesalahannya hilang tetapi data tidak ditampilkan dalam tampilan..Apakah saya perlu mengubah apa pun dalam tampilan juga ??? - person Asridh Kumar; 25.09.2018
comment
saya mendapat nama properti yang salah ..itu tidak ditampilkan dalam tampilan..ini berfungsi dengan baik sekarang..tetapi paginator tidak berfungsi ?? alasan apapun?? - person Asridh Kumar; 25.09.2018
comment
Ya. Anda perlu mendeklarasikan @ViewChild(MatPaginator) paginator: MatPaginator; Kemudian tulis this.dataSource.paginator = this.paginator; - person Amol B Lande; 25.09.2018
comment
Hai Asridh, Jika solusi membantu Anda. Silakan suka. - person Amol B Lande; 01.10.2018

arrow_upward
0
arrow_downward

Kesalahan terjadi karena tabel belum diinisialisasi ketika Anda mencoba mengakses data. Biasanya terjadi juga ketika Anda mencoba merender baris sebelum tabel diinisialisasi. Untuk mengatasinya coba jalankan

Ini seharusnya menyelesaikan masalah:

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

Setidaknya coba masukkan kode setelah tampilan diinisialisasi di ngAfterContentInit.

person Simone Solfato    schedule 27.02.2019