CODEWITHSUNDEEP
angularangular-materialangular-material2angular8
pratik jaiswal
pratik jaiswal

Reputation: 2065

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>

enter image description here This is the data I have passed

Upvotes: 0

Views: 748

Answers (1)

Tushar
Tushar

Reputation: 2078

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

Upvotes: 1

Related Questions