Angular 4材质对话框将对象数组传递给对话框

Question

Hi I am trying to pass an array of object to material dialog. Here is how i am doing it.

Model
export interface IPoducts{
     recordname: string;
     comments: [{
         comment: string
      }]
}

In component class has following relevant

        constructor(public dialog: MdDialog, private productService: ProductService){}
        prod: IProducts[]=[]
        ngOnInit(): void{  
    //service getting data from database       

this.productService.getProcessnotes().subscribe(producsts=>this.products=products,error=>this.errorMessage=<any>error);

         //opening dialgue
        openDialog(prod:any): void {
            let dialogRef = this.dialog.open(prodDialog, {
              width: '400px',
              height: '500px;',
            data: this.prod  <------------------passing the object array
              }); 
          }}

Dialogbox component.

 @Component({
      selector: proddialog',
      templateUrl: 'dialogdetails.html',
    })
     export class ProdDialog implements OnInit{
           public pnote: IProducts[];
          constructor(
            public dialogRef: MdDialogRef<DialogOverviewExampleDialog>,
        @Inject(MD_DIALOG_DATA) public  data: {pnote:this.prod }) { }
         public pnote: products;
          onNoClick(): void {
            this.dialogRef.close();
          }
           public ngOnInit():void{
               this.pnote=this.data.prod;

           }

In main template button triggers the dialog box by passing a pnote from *ngFor="let pnote of products"

 <button md-raised-button (click)="openDialog(pnote)">Open Dialog</button>

Dialog box is

<div>
  <h2 md-dialog-title>MY DIALOG</h2>
  <hr>
  <md-dialog-content>
        <div*ngFor=prod in products>
          {{prod.recorname}}
        </div>
    <br>
    <br>
    <strong>{{data}}</strong>
  </md-dialog-content>
  <hr>
  <md-dialog-actions>
    <button md-raised-button (click)="onCloseConfirm()">CONFIRM</button>&nbsp;
    <button md-raised-button (click)="onCloseCancel()">CANCEL</button>
  </md-dialog-actions>
</div>

When I run this dialog pops out but for data is just see bank. Noe data. Can you please let me how to pass array of objects in the dialog. My solution is based on other solutions here but no luck.

Note: Everything works fine there is no error except no array of object being passed.

Answer 1

You are not anywhere setting values for this.prod , so it will not have a value. So you either need to pass prod in the openDialog , or then assign the parameter from the method to this.prod :

openDialog(prod:any): void {
  this.prod = prod; // here!!
  let dialogRef = this.dialog.open(prodDialog, {
    width: '400px',
    height: '500px;',
    data: this.prod  // now 'this.prod' will have values!
  }); 
}