为什么更改组件文件（.ts）中的值而不呈现在模板文件（.html）中

Question

I tried to change a value in component file, but the current and updated value not rendered in the template file. Here is my Code.

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

  } 
}

and here is my template.html

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

Note: When the value is logged to console, it prints the updated value. But, the updated value doesn't get rendered into template.html file. And also i get this issue in many occasion. So, kindly provide solution and also reason for the issue.

Answer 1

Your code looks fine, but if your template isn't detecting the changes, you could try and use ChangeDetectorRef .

import {ChangeDetectorRef} from '@angular/core'

and in your component inject it to your constructor and use it after setting your boolean to true .

constructor(private changeDetectorRef: ChangeDetectorRef)

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