Блог

Я следил за этой статьей: 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}} бла-бла-бла

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

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

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

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

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

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

 @input expense: Expense;

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

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