* ng更新された変数を評価するには

Question

（Angular/JS学習者）現在、どの子コントローラが現在アクティブであるかによって、値が更新されるオブジェクトがあります。このオブジェクトの値に基づいて表示する別のボタンを取得しようとしています。

私の親のコントローラは次のようになります。

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

そして、私の両親の関連部分は、HTMLは次のようになります。「未定義のプロパティを読み取ることができません 『タイトル』」：

<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> 

これは、エラーがスローされます。私のサービスは、タイトルが動作する2つのボタンを削除したように意図したとおりに動作しています。正しい方向のポイントは最高です。おかげ

Answer 1

が安全なナビゲーション演算子を使用し

<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>