Angular 4材质对话框将对象数组传递到对话框答案

【问题标题】：Angular 4 material dialog box passing in array of object to dialog boxAngular 4材质对话框将对象数组传递到对话框
【发布时间】：2017-12-15 02:21:30
【问题描述】：

您好，我正在尝试将对象数组传递给材质对话框。这是我的做法。

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

在组件类中有以下相关

        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
              }); 
          }}

对话框组件。

 @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>

对话框是

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

当我运行此对话框时会弹出，但数据只是查看银行。无数据。你能告诉我如何在对话框中传递对象数组吗？我的解决方案基于此处的其他解决方案，但没有运气。

注意：一切正常，除了没有传递对象数组之外没有错误。

【问题讨论】：

您能以某种方式重新审视缩进吗？第二个 sn-p 太离奇了，看不懂。
刚刚做了，希望对您有所帮助。主要问题是数据在哪里：this.prod 一些如何没有被传递到对话框

标签： javascript angular typescript

【解决方案1】：

您没有在任何地方为this.prod 设置值，因此它不会有值。所以你要么需要在openDialog中传递prod，要么将方法中的参数赋值给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!
  }); 
}

【讨论】：