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

Answer 1

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 :

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

2. Please check ( and share if there are any ) errors on the devtools of the browser.

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