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>

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)


ลองใส่ dataSource = new MatTableDataSource(); ไว้ใน Constructor:

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

ทำการเริ่มต้นภายในตัวสร้าง

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

โปรดลองใช้รหัสนี้:

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) paginator: MatPaginator; จากนั้นเขียน this.dataSource.paginator = this.paginator; - person Amol B Lande; 25.09.2018
comment
สวัสดี Asridh หากโซลูชันช่วยคุณได้ กรุณาชอบ. - person Amol B Lande; 01.10.2018

ข้อผิดพลาดเกิดขึ้นเนื่องจากตารางยังไม่ได้เตรียมใช้งานเมื่อคุณพยายามเข้าถึงข้อมูล มักจะเกิดขึ้นเช่นกันเมื่อคุณพยายามแสดงแถวก่อนที่จะเตรียมใช้งานตาราง เพื่อแก้ปัญหาให้ลองเรียกใช้

สิ่งนี้ควรแก้ปัญหา:

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