Отображение данных в диалоге материалов из объекта в главном компоненте приложения?

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' у меня есть следующее:

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

Я видел, что ваш код все идеально, и данные передаются в модель, вам нужно только сделать это,

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

Answer 2

Вы должны иметь возможность использовать свойство data в своих привязках:

{{ data.dog.funFact }}