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

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

1 个答案: