Question

尝试将数据从对象推入Angular Material应用程序的对话框窗口中。可以肯定的是有可能-但可能缺少正确传递它的方法。代码在这里：

app.component.ts

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { DialogWindowComponent } from './dialog-window/dialog-window.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'modal-window';
  dogs = [
    {
      name: 'louie',
      breed: 'collie',
      funFact: 'i love to howl'
    },
    {
      name: 'nina',
      breed: 'mutt',
      funFact: 'you must always pet me'
    },
    {
      name: 'bruce',
      breed: 'pitbull',
      funFact: 'my full name is bruce wayne'
    },
    {
      name: 'rudie',
      breed: 'chihuahua',
      funFact: 'i\'m a terror'
    },
  ];

  constructor(public dialog: MatDialog) {}

  openDialog(dog:any): void {
    this.dogs = dog;
    const dialogRef = this.dialog.open(DialogWindowComponent, {
      data: this.dogs
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');

    });
  }
}

在我的应用程序项目中一个名为“对话框窗口”的文件夹中，我得到了以下内容：

dialog-window.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'app-dialog-window',
  templateUrl: './dialog-window.component.html',
  styleUrls: ['./dialog-window.component.scss']
})
export class DialogWindowComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<DialogWindowComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

  ngOnInit() {
  }

}

dialog-window.component.html

{{ dog.funFact }}

任何输入都会有所帮助！

Answer 1

您应该可以在绑定中使用data属性：

{{ data.dog.funFact }}

Answer 2

我已经看到您的代码一切都完美无缺，而且数据也可以传递给模型，您只需要这样做，

    import { Component, OnInit, Inject } from '@angular/core';
    import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

    @Component({
      selector: 'app-dialog-window',
      templateUrl: './dialog-window.component.html',
      styleUrls: ['./dialog-window.component.scss']
    })
    export class DialogWindowComponent implements OnInit {

      constructor(
        public dialogRef: MatDialogRef<DialogWindowComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any) {}

      ngOnInit() {
       console.log(data.dog.funFact)
      }

    }

所有从组件传递到对话框的dataObject都由我们在构造函数中使用的数据变量处理。因此，将您的.html文件写为{{ data.dog.funFact }}

在主应用程序组件中的“对象”中的“材料”对话框中显示数据？

2 个答案: