* ngIst eine aktualisierte Variable zu bewerten

Question

(Angular/JS-Lerner) Ich habe ein Objekt, dessen Wert über einen Dienst aktualisiert wird, abhängig davon, welcher Kind-Controller gerade aktiv ist. Ich versuche, eine andere Schaltfläche basierend auf diesem Objektwert anzuzeigen.

My Parent-Controller wie folgt aussehen:

import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 
import { ChildDataService } from "../core/helpers/child-data.service"; 
import { Subscription } from "rxjs/Subscription"; 

@Component({ 
    selector: 'app-parent', 
    templateUrl: './parent.component.html', 
    styleUrls: ['./parent.component.scss'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class ParentComponent implements OnInit { 
    childDetails: {title?: string}; 

    private subscription:Subscription; 

    constructor(private childDataService: ChildDataService) { 
    this.childDataService.childLoaded$.subscribe(
     newChildDetails => { 
     console.log(newChildDetails); 
     this.childDetails = newChildDetails 
     }); 
    } 
    someFunction(){}; 

    someFunction2(){}; 
} 

und den relevanten Teil meiner Eltern HTML wie folgt aussieht:

<div class="subheader"> 
    <h1>{{ childDetails.title }}</h1> 
    <button *ngIf="childDetails.title == 'dashboard'" (click)="someFunction()">dashboard</button> 
    <button *ngIf="childDetails.title == 'page2'" (click)="someFunction2()">page2</button> 
</div> 

Dies wirft die Fehlermeldung: "Kann nicht Eigentum 'title' undefinierten lesen" . Mein Dienst funktioniert wie beabsichtigt, als ob ich die 2 Tasten entfernen würde, die der Titel funktioniert. Ein Punkt in die richtige Richtung wäre großartig. Dank

Answer 1

einem sicheren Navigation verwendet Operator

<div class="subheader"> 
    <h1>{{ childDetails?.title }}</h1> 
    <button *ngIf="childDetails?.title == 'dashboard'" (click)="someFunction()">dashboard</button> 
    <button *ngIf="childDetails?.title == 'page2'" (click)="someFunction2()">page2</button> 
</div>