Angular 6 Async Binding Crazy Behavior - angular-material

Question

I am using a material dialog to display details of entries. I pass data to dialogue in constructor. However despite the fact that variable exists, and is not null, data is not displayed for some reason.
Bellow is my Dialogue.ts
import {Component, Inject, OnDestroy, OnInit} from '#angular/core';
import {Incident} from '../incident';
import {IncidentsService} from '../incidents.service';
import {MAT_DIALOG_DATA} from '#angular/material';
import {Subscription} from 'rxjs';
#Component({
selector: 'app-incident-details',
templateUrl: './incident-details.component.html',
styleUrls: ['./incident-details.component.css']
})
export class IncidentDetailsComponent implements OnInit, OnDestroy {
public incident: Incident;
private subscription: Subscription;
constructor(#Inject(MAT_DIALOG_DATA) public data: any, private incidentsService: IncidentsService) {
this.incident = this.data.incident;
console.log('?????????? ' + JSON.stringify(this.incident));
}
renderPDF(id: number) {
this.subscription = this.incidentsService.getPdfById(id)
.subscribe(response => {
// console.log('Response: ' + response);
const file = new Blob([response], {type: 'application/pdf'});
const fileURL = URL.createObjectURL(file);
// this.dialogRef.close();
window.open(fileURL);
});
}
ngOnInit() {
}
ngOnDestroy(): void {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}
Bellow is the template dialogue.html
<mat-card>
<h2 mat-dialog-title style="text-align: center; text-decoration: underline;"><b>Έκθεση Ιστολογικής Εξέτασης</b></h2>
<br/>
<mat-dialog-content>
<div>{{incident|json}}</div> **// Printing Incident Data**
<table>
<tr>
<td><b>Αρ. Πρωτοκόλλου: </b>{{incident.protocolNo}} </td>
<td><b>Ημερομηνία Παραλαβής: </b>{{incident.dateIN | date:'dd-MM-yyyy'}} </td>
</tr>
<tr>
<td><b>Ονοματεπώνυμο: </b> {{incident.patient?.lastName.toString()}} {{incident.patient?.firstName}} </td>
<td><b>Ημ. Γέννησης: </b> {{incident.patient?.birthday | date:'dd-MM-yyyy'}} </td>
</tr>
</table>
<p><b>Αποστέλων Ιατρός: </b> {{incident.doctor?.lastName}} {{incident.doctor?.firstName}}</p>
<div *ngIf="incident.klinikesPlirofories">
<h3 class="subSection" mat-dialog-title>Κλινικές Πληροφορίες</h3>
<p>{{incident.klinikesPlirofories}}</p>
</div>
<div *ngIf="incident.yliko">
<h3 class="subSection" mat-dialog-title>Υλικό</h3>
<p>{{incident?.yliko}}</p>
</div>
<div *ngIf="incident.makro">
<h3 class="subSection" mat-dialog-title>Μακροσκοπικά</h3>
<p>{{incident?.makro}}</p>
</div>
<div *ngIf="incident.mikro">
<h3 class="subSection" mat-dialog-title>Μικροσκοπικά</h3>
<p>{{incident?.mikro}}</p>
</div>
<div *ngIf="incident.anoso">
<h3 class="subSection" mat-dialog-title>Ανοσοϊστοχημικός Έλεγχος</h3>
<p>{{incident.anoso}}</p>
</div>
<div *ngIf="incident.anosoEkthesi">
<h3 class="subSection" mat-dialog-title>Ανοσο Έκθεση</h3>
<p>{{incident.anosoEkthesi}}</p>
</div>
<div *ngIf="incident.histo">
<h3 class="subSection" mat-dialog-title>Iστοχημικός Έλεγχος</h3>
<p>{{incident.histo}}</p>
</div>
<div *ngIf="incident.symperasma">
<h3 class="subSection" mat-dialog-title>Συμπέρασμα</h3>
<p>{{incident?.symperasma}}</p>
</div>
<div *ngIf="incident.mikroskopikaSymperasma">
<h3 class="subSection" mat-dialog-title>Μικροσκοπικά Συμπέρασμα</h3>
<p>{{incident?.mikroskopikaSymperasma}}</p>
</div>
<div>
<h3 class="subSection" mat-dialog-title>Πληρωμή</h3>
<p>{{incident.isPayed ? 'Ναι' : 'Όχι'}}</p>
</div>
<div>
<h3 class="subSection" mat-dialog-title>Καρκίνος</h3>
<p>{{incident.cancer ? 'Θετικό' : 'Αρνητικό'}}</p>
</div>
<div *ngIf="incident.signingDoctor">
<h3 class="subSection" mat-dialog-title>Υπογράφων Ιατρός</h3>
<p>{{incident.signingDoctor?.lastName}} {{incident.signingDoctor?.firstName}}</p>
</div>
<div *ngIf="incident.simpliromatikiEkthesi">
<h3 class="subSection" mat-dialog-title>Συμπληρωματική Έκθεση</h3>
<p>{{incident?.simpliromatikiEkthesi}}</p>
</div>
</mat-dialog-content>
</mat-card>
<!--<div>{{incident|json}}</div>-->
<mat-dialog-actions>
<button mat-raised-button mat-dialog-close color="warn">Close</button>
<button mat-raised-button color="primary" (click)="renderPDF(incident.id)">
<i class="material-icons">print</i>
</button>
</mat-dialog-actions>
And bellow there is a screenshot:
As you can see incident get printed and exists with data both in console and in template. However everywhere else in template, by calling incident.member prints nothing.
I am opening dialogue and passing data to it using the function below from another component.
async openDialog(id: number) {
let incident: Incident;
this.subscriptions.push(
await this.incidentsService.getIncidentByID(id).subscribe(response => {
incident = response;
const dialogRef = this.dialog.open(IncidentDetailsComponent, {height: '900px', width: '900px', 'data': {'incident': response}});
}));
// const dialogRef = this.dialog.open(IncidentDetailsComponent, {height: '900px', width: '900px', 'data': {'incident': incident}});
}
Bellow is getIncidentByID() function
getIncidentByID(id: number): Observable<Incident> {
const incidentUrl = 'incidents/details/' + id;
return this.http.get<Incident>(incidentUrl)
.pipe(catchError(ErrorHandler.handleError));
}
Bellow is Incident.ts
import {Patient} from '../patients/patient';
import {Clinic} from '../clinics/clinic';
import {Doctor} from 'app/doctors/doctor';
import {SigningDoctor} from '../signing-doctors/signing-doctor';
import {BodyPart} from '../body-part/BodyPart';
export class Incident {
private _id: number;
private _protocolNo: string;
private _dateIN: any;
private _dateOUT: any;
private _isPayed: boolean;
private _yliko: string;
private _makro: string;
private _anoso: string;
private _mikro: string;
private _symperasma: string;
private _patient: Patient;
private _clinic: Clinic;
private _doctor: Doctor;
private _histo: string;
private _klinikesPlirofories: string;
private _simpliromatikiEkthesi: string;
private _signingDoctor: SigningDoctor;
private _mikroskopikaSymperasma: string;
private _cancer: boolean;
private _anosoEkthesi: string;
private _bodyPart: BodyPart;
get id(): number {
return this._id;
}
set id(value: number) {
this._id = value;
}
get protocolNo(): string {
return this._protocolNo;
}
set protocolNo(value: string) {
this._protocolNo = value;
}
get dateIN(): any {
return this._dateIN;
}
set dateIN(value: any) {
this._dateIN = value;
}
get dateOUT(): any {
return this._dateOUT;
}
set dateOUT(value: any) {
this._dateOUT = value;
}
get isPayed(): boolean {
return this._isPayed;
}
set isPayed(value: boolean) {
this._isPayed = value;
}
get yliko(): string {
return this._yliko;
}
set yliko(value: string) {
this._yliko = value;
}
get makro(): string {
return this._makro;
}
set makro(value: string) {
this._makro = value;
}
get anoso(): string {
return this._anoso;
}
set anoso(value: string) {
this._anoso = value;
}
get mikro(): string {
return this._mikro;
}
set mikro(value: string) {
this._mikro = value;
}
get symperasma(): string {
return this._symperasma;
}
set symperasma(value: string) {
this._symperasma = value;
}
get mikroskopikaSymperasma(): string {
return this._mikroskopikaSymperasma;
}
set mikroskopikaSymperasma(value: string) {
this._mikroskopikaSymperasma = value;
}
get patient(): Patient {
return this._patient;
}
set patient(value: Patient) {
this._patient = value;
}
get clinic(): Clinic {
return this._clinic;
}
set clinic(value: Clinic) {
this._clinic = value;
}
get doctor(): Doctor {
return this._doctor;
}
set doctor(value: Doctor) {
this._doctor = value;
}
get histo(): string {
return this._histo;
}
set histo(value: string) {
this._histo = value;
}
get klinikesPlirofories(): string {
return this._klinikesPlirofories;
}
set klinikesPlirofories(value: string) {
this._klinikesPlirofories = value;
}
get simpliromatikiEkthesi(): string {
return this._simpliromatikiEkthesi;
}
set simpliromatikiEkthesi(value: string) {
this._simpliromatikiEkthesi = value;
}
get signingDoctor(): SigningDoctor {
return this._signingDoctor;
}
set signingDoctor(value: SigningDoctor) {
this._signingDoctor = value;
}
get cancer(): boolean {
return this._cancer;
}
set cancer(value: boolean) {
this._cancer = value;
}
get anosoEkthesi(): string {
return this._anosoEkthesi;
}
set anosoEkthesi(value: string) {
this._anosoEkthesi = value;
}
get bodyPart(): BodyPart {
return this._bodyPart;
}
set bodyPart(value: BodyPart) {
this._bodyPart = value;
}
}
Crazy or what??
Has anybody faced anything similar?? Any Ideas? I am bunging my head two days now with this... Something wrong with the Observable??

Answer 1

The problem was in the way i was getting the data. If you look closely to the screenshot the printed object is within a table [{object}]. So i changed the code from:
async openDialog(id: number) {
let incident: Incident;
this.subscriptions.push(
await this.incidentsService.getIncidentByID(id).subscribe(response => {
incident = response;
const dialogRef = this.dialog.open(IncidentDetailsComponent, {height: '900px', width: '900px', 'data': {'incident': response}});
}));
// const dialogRef = this.dialog.open(IncidentDetailsComponent, {height: '900px', width: '900px', 'data': {'incident': incident}});
}
To:
async openDialog(id: number) {
let incident: Incident;
this.subscriptions.push(
await this.incidentsService.getIncidentByID(id).subscribe(response => {
incident = response[0]; <-- HERE IS THE CHANGE
const dialogRef = this.dialog.open(IncidentDetailsComponent, {height: '900px', width: '900px', 'data': {'incident': response}});
}));
// const dialogRef = this.dialog.open(IncidentDetailsComponent, {height: '900px', width: '900px', 'data': {'incident': incident}});
}
And everything Worked. So stupid of me....