无法访问角度材质对话框传递的数据

Question

我已将 formarray 值传递给角度材质对话框。但是在显示时我收到此错误：“找不到类型为 'object' 的不同支持对象 '[object Object]'。NgFor 仅支持绑定到 Iterables，例如 Array”

这是我的代码

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()

  }


})

}

}

对话 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)


    }
`

对话框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> 

这是我传过来的数据

Answer 1

问题是您正在尝试迭代对象。它不是一个数组。如果你想用*ngFor 迭代对象，那么使用Angular 的keyvalue 管道。见下文：

<div *ngFor = " let data of savedForLater.purchase | keyvalue"> 
  {{data.key}} : {{data.value}}
</div>

你也可以只打印值。

<div *ngFor = " let data of savedForLater.purchase | keyvalue"> 
   {{data.value}}
</div>

参考：https://angular.io/api/common/KeyValuePipe