Q:

Unable to access data passed by angular material dialog

I have passed formarray values to angular material dialog. But while displaying I am getting this error: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Array"
Here is my code
openDialog() {

this.purchase_id = ("purchase" + new Date().toISOString())

for(let i=0 ;i<this.product.value.length; i++) {

  let new_purchase : any = {
    purchase_id : this.purchase_id,
    quantity : this.product.value[i].product_quantity,
    buyingprice : this.product.value[i].product_Buyingprice,
    date : new Date(),
    product_id : Number (this.product.value[i].product_name),
    vendor_id : this.vendor_id,
    totalprice : String (this.product.value[i].product_quantity * this.product.value[i].product_Buyingprice)

  }

  const dialogRef =  this.dialog.open(ConfirmDialogComponent,{data : {purchase : new_purchase} })
  dialogRef.afterClosed().subscribe(result => {
  console.log(`result : ${result}`)

  if(result == 'true') {

    this.newPurchase()

  }

})

}

}
dialog ts
`export class ConfirmDialogComponent implements OnInit {

  private savedForLater : any;

  constructor(
    public containingDialog: MatDialogRef<ConfirmDialogComponent>,

    @Inject(MAT_DIALOG_DATA) public data : any)  { 

        this.savedForLater = data;

        console.log(this.savedForLater)

    }
`

dialog html
    <p>confirm-dialog works!</p>
<h2 mat-dialog-title>Details</h2>
<mat-dialog-content> 
        <div *ngFor = " let data of savedForLater"> 
                {{savedForLater.quantity}}
        </div>
</mat-dialog-content>

<mat-dialog-actions>

    <button mat-button mat-dialog-close mat-dialog-close = "false">log out</button>
    <button mat-button mat-dialog-close mat-dialog-close = "true">login</button>

</mat-dialog-actions> 

 This is the data I have passed

A:

The problem is you are trying to iterate object. It's not an Array. If you want to iterate object with *ngFor then use Angular's keyvalue pipe. See below :
<div *ngFor = " let data of savedForLater.purchase | keyvalue"> 
  {{data.key}} : {{data.value}}
</div>

You can print only value also.
<div *ngFor = " let data of savedForLater.purchase | keyvalue"> 
   {{data.value}}
</div>

Reference : https://angular.io/api/common/KeyValuePipe

