Значение переменной равно нулю в html, но имеет значение в конструкторе

Question

Попытка создать mat-диалог, который создается кнопкой меню на панели навигации, затем открывает mat-диалог, который выполнит дополнительную работу.Я могу создать диалоговое окно в navbar component.ts, передать переменную (title), которую я хочу, конструктору в dialogs.component.ts, но эта переменная имеет значение null в component.html.Я пробовал разные способы обращения к переменной, но ни один из них не работает.Я записываю значение в консоль, поэтому знаю, что оно есть в конструкторе, но как получить к нему доступ в html?

Navbar.component.ts:

...
  realTimeTracking() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.hasBackdrop = true;
    dialogConfig.width = '60%';
    dialogConfig.data = {
      title: "Real-time Tracking"
    };

    console.log('real-time tracking, dialogConfig.data:', dialogConfig);

    this.dialog.open(DialogsComponent, dialogConfig );

  };

....

dialogs.component.ts:

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

@Component({
  selector: 'app-dialogs',
  templateUrl: './dialogs.component.html',
  styleUrls: ['./dialogs.component.scss']
})
  export class DialogsComponent implements OnInit {
     title: string;

  constructor(private dialogRef: MatDialogRef<DialogsComponent>,
              @Inject(MAT_DIALOG_DATA) data: {title: string} ) { 
                console.log('constructing dialog, data=', data);
                console.log('data.title:', data.title)
                this.title = data.title;
                console.log('this.title:', this.title);
              }

  ngOnInit() {
  }

}

dialogs.component.html:

<h2 mat-dialog-title>title={{data.title}}</h2>
<h2 mat-dialog-title>title</h2>
<mat-dialog-content >

  <mat-form-field>
    <label>Date/Time Range
      <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
             [selectMode]="'range'" style="width: 70%">
      <owl-date-time #dt10></owl-date-time>
    </label>
  </mat-form-field>
</mat-dialog-content>

<mat-dialog-actions align="center">
  <button class="mat-raised-button"(click)="close()">Close</button>
  <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
</mat-dialog-actions>

снимок экрана диалога: снимок экрана журнала консоли:

Должна быть простая и очевидная вещь, которую я делаю неправильно ...

Спасибо!

Answer 1

Как указал @GaryB, вы должны сделать это следующим образом:

@Inject(MAT_DIALOG_DATA) data: {title:string}

В вашем контроллере, когда вы скажете:

@Inject(MAT_DIALOG_DATA) data: string

Вы говорите, что data являетсяпеременная строкового типа, поэтому при попытке установить

this.title = data.title

произойдет сбой, поскольку data не имеет свойства с именем title.

ОБНОВЛЕНИЕ

Вам следует изменить

<h2 mat-dialog-title>title={{data.title}}</h2>

на

<h2 mat-dialog-title>title={{title}}</h2>

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

Рабочий пример

Answer 2

Я думаю, это должен быть data.title

первая строка:

<h2 mat-dialog-title>title={{data.title}}</h2>

Также в файле .ts данные должны быть такими объектами:

@Inject(MAT_DIALOG_DATA) data: {title:string}