web-dev-qa-db-fra.com

Angular 2 - * ngif ne rafraîchit pas lorsque la mise à jour de variable oberservable est souscrite

dans le code HTML j'ai l'avertissement ne devrait être affiché que lorsqu'un état d'erreur se produit comme thius

<div class="alert alert-danger" *ngIf="error">
    <strong>Not saved!</strong> There was an error when saving the project. Please try again later.
</div>

cela fonctionne bien. mais quand je définis la valeur d'un observable, le ngIf n'obtient pas la valeur mise à jour. 

Voici le code simplifié qui définit toujours l'erreur sur true pour les tests de purposses

export class createProjectComponent {
    constructor(private service:ProjectsService){

    }

    model = new myModel();
    error = false;
    submitForm(){    
        this.service.createProject(this.model).subscribe(i=>{
            this.error=true;
          }
    }

y a-t-il une sorte de notification que je dois déclencher?

javascriptangularrxjs
14
Boas Enkler

Vous pouvez essayer si cela résout votre problème:

constructor(private cdRef:ChangeDetectorRef) {}

submitForm(){    
    this.service.createProject(this.model).subscribe(i=>{
        this.error=true;
        this.cdRef.detectChanges();
    }
}

Si c'est le cas, il y a du code dans this.service.createProject(this.model) qui provoque l'exécution en quittant la zone Angulars.

mettre à jour

Vous n'en avez pas besoin si vous utilisez ()=> partout au lieu de function () et si vous ne transmettez pas de fonctions simplement par leur nom, comme someFunc(mycallback), mais plutôt avec someFunc(() => mycallback()) ou someFunc(mycallback.bind(this)).

19
Günter Zöchbauer

Trouvé l'erreur. la this change. dans l'observation, this pointe sur osbervable et non plus sur le composant.

je dois donc obtenir une référence du composant à une variable et définir error sur cette référence sur true.

le code de travail ressemble à ceci:

var component = this;

this.service.createProject(this.model).subscribe(i=>{
                component.error = true;
1
Boas Enkler