данные, переданные компоненту MatDialogRef, не отображаются

Question

Я следил за этой статьей: https://material.angular.io/components/dialog/examples и сделал несколько небольших изменений, чтобы передать объект класса.

Я убежден, что данные передаются на модальный компонент, посмотрев на результат этого:

dialogRef.afterClosed().subscribe((result) => {
  console.log(result);
});

ниже приведен фрагмент кода для лучшего понимания проблемы:

Под модальным компонентом:

@input expense: Expense;

  constructor(
    public dialogRef: MatDialogRef<ExpenseModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: Expense
    ) {
      //this.expense= data;
   }

Внутри родительского компонента:

openModalWin(exp: Expense):void
   {
    const dialogRef = this.dialog.open(ExpenseModalComponent, {
      height: '400px',
      width: '600px',
      data: {expense: exp} 
    });

шаблон компонента модели:

{{expense.ExpenseID}} бла-бла

если я не прокомментирую две строки кода, закомментированные выше, модальное окно будет пустым.

Я также пытался использовать результат для получения того же результата.

однако, если я закомментировал две строки кода выше, тогда ... работает просто отлично.

есть идеи, почему привязка данных перестает работать, когда компонент отображается в модальном диалоге?

спасибо заранее за любые советы.

Answer 1

Вы должны получить доступ к данным, которые содержат пару значений ключа расхода. Используйте this.data для доступа к объекту в matDialogRef

Answer 2

хмм ... похоже я что-то пропустил, рабочий как показано ниже с изменениями жирным шрифтом

@input expense: Expense;

  constructor(
    public dialogRef: MatDialogRef<ExpenseModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: **any**
    ) {
      **this.expense= data.expense;**
   }