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

我试图更改组件文件中的值，但模板文件中未呈现当前值和更新值。这是我的密码

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>

注意：将该值记录到console时，它将打印更新后的值。但是，更新后的值不会呈现到template.html文件中。

---

我在很多场合也遇到过这个问题。因此，请提供问题的解决方案和原因。

您的代码看起来不错，但是如果您的模板没有检测到更改，您可以尝试使用

在组件中，将其注入构造函数，并在将布尔值设置为true后使用它

---

你是说div没有切换吗？@SASIKUMARS我在这里只提到了一个变量，但我对许多变量也这么做。所以，我不能返回一个变量。你的HTML有效吗？您没有关闭并尝试此操作，因为没有Href单击代码的文本。这是要在ts中使用切换的示例内容。使用下面的代码。切换内容=！this.toggleContent；//切换

import {ChangeDetectorRef} from '@angular/core'

constructor(private changeDetectorRef: ChangeDetectorRef)

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