mat table inside mat dialog not diplaying my data

Question

I'm trying to get my data and list it to the mat-table but inside in the mat-dialog i tried it and it won't show the data.

.TS

DeliveryReceipt: DeliveryReceiptDTO[] = [];
displayedColumns:string[] = ['transactionType'];
deliveryReceiptObject: any;

getList() {
this.DeliverySVC.findAll(20, 1).subscribe((response: DeliveryReceiptDTO) => {
  this.deliveryReceiptObject = response;
  this.DeliveryReceipt = JSON.parse(JSON.stringify(this.deliveryReceiptObject.items))
  
})

}

.HTML

<table mat-table [dataSource]="DeliveryReceipt">

<ng-container matColumnDef="transactionType">
<th mat-header-cell *matHeaderCellDef>DR NUMBER </th>
<td mat-cell *matCellDef="let element"><span>{{element.transactionType}}</span></td>
</ng-container>


<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

GET https://localhost/api/DeliveryReceipt/list 500

score 1 · Answer 1 · answered Jun 23 '22 at 03:37

Can you please share the complete .ts file?

I have used mat-table on several places in one of my projects and below should be the list of items which you can review :

getList() should be called from constructor or ngOnInit method as the datasource of the mat-table should be ready before rendering the page for the first time.
Please check ( and share if there are any ) errors on the devtools of the browser.
You should also refresh the datasource of the mat-table every time you get the response from API successfully. You can try the below code :

this.DeliveryReceipt = new MatTableDataSource(response.items);

Let me know if this will help.

mat table inside mat dialog not diplaying my data

1 Answers1