Pourquoi la modification de valeur dans le fichier de composant (.ts) ne s'affiche pas dans le fichier de modèle (.html)

Question

J'ai essayé de modifier une valeur dans le fichier de composant, mais la valeur actuelle et mise à jour n'est pas restituée dans le fichier modèle. Voici mon 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() { 

    } 
} 

et voici mon template.html

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

Note: Lorsque la valeur est enregistrée à la console, il imprime la valeur actualisée. Mais, la valeur mise à jour n'est pas rendue dans le fichier template.html. Et aussi je reçois ce problème à plusieurs reprises. Alors, veuillez fournir une solution et aussi la raison du problème.

Answer 1

Votre code semble correct, mais si votre modèle ne détecte pas les modifications, vous pouvez essayer d'utiliser ChangeDetectorRef.

import {ChangeDetectorRef} from '@angular/core' 

et dans votre composant Injecter à votre constructeur et l'utiliser après avoir défini votre booléenne true.

constructor(private changeDetectorRef: ChangeDetectorRef) 

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