テンプレートファイル（.html）でレンダリングしないコンポーネントファイル（.ts）の値を変更する理由

Question

コンポーネントファイルの値を変更しようとしましたが、現在および更新された値がテンプレートファイルにレンダリングされませんでした。ここに私のコードがあります。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'cr-content-upload', 
    templateUrl: './app/template.html' 
}) 
export class ContentUploadComponent { 
    constructor() { } 

    toggleContent:boolean = false; 
    updateContent(data:any) { 
     if(data == "streaming") { 
     this.toggleContent = true; 
     console.log(this.toggleContent); 
     } 
    } 
    ngOnInit() { 

    } 
} 

、ここでは私のtemplate.html

<a href="javascript:void(0)" (click)="updateContent('streaming')"> 
<div *ngIf="toggleContent"> 
    This is sample Content 
</div> 

。注：値をコンソールに記録されている場合、それが更新された値を出力します。しかし、更新された値はtemplate.htmlファイルにレンダリングされません。 また、私は多くの場合この問題を抱えています。だから、親切に解決策を提供し、問題の理由も提示してください。

Answer 1

コードは正常ですが、テンプレートで変更が検出されない場合は、ChangeDetectorRefを試してみてください。

import {ChangeDetectorRef} from '@angular/core' 

やコンポーネントで、あなたのコンストラクタにそれを注入し、trueに自分のブール値を設定した後、それを使用しています。

constructor(private changeDetectorRef: ChangeDetectorRef) 

updateContent(data:any) { 
    if(data == "streaming") { 
    this.toggleContent = true; 
    this.changeDetectorRef.detectChanges(); 
    } 
}