Angular 6异步绑定疯狂行为

Question

我正在使用一个材料对话框来显示条目的详细信息。我将数据传递给构造函数中的对话。但是，尽管存在变量且该变量不为null，但由于某些原因仍无法显示数据。

同胞是我的 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();
    }
  }
}

以下是模板 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>
  &nbsp;
  &nbsp;
  <button mat-raised-button color="primary" (click)="renderPDF(incident.id)">
    <i class="material-icons">print</i>
  </button>
</mat-dialog-actions>

下面是一个屏幕截图：

您可以看到事件被打印出来，并且在控制台和模板中都与数据一起存在。但是，通过调用 incident.member ，模板中的其他任何地方都不会打印任何内容。

我正在打开对话，并使用下面的功能从另一个组件向其传递数据。

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是 getIncidentByID（） 函数

getIncidentByID(id: number): Observable<Incident> {
    const incidentUrl = 'incidents/details/' + id;
    return this.http.get<Incident>(incidentUrl)
      .pipe(catchError(ErrorHandler.handleError));
  } 

同胞是 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;
  }

}

疯狂还是什么？

有人面对过类似的事情吗？有任何想法吗？我现在两天都在用这个...把头弄成一团...可观察的东西出了什么问题？

Answer 1

问题出在我获取数据的方式上。如果您仔细查看屏幕截图，则打印的对象位于表[{object}]中。因此，我从以下代码更改了代码：

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

收件人：

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

一切正常。我真是愚蠢....