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

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

对话框窗口组件.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)
}
}

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