web-dev-qa-db-fra.com

Angular 5 Affichage non mis à jour après expiration du délai

Je suis en train de définir un délai d'attente pour masquer un élément après un certain temps dans Angular 5:

this.showElement = true;
setTimeout(function () {
  console.log('hide');
  this.showElement = false;
}, 2000);

Cependant, cela ne met pas à jour la vue. Le console.log me donne un résultat, donc le délai d'attente fonctionne définitivement.

J'ai trouvé que dans Angularjs vous deviez appeler $apply afin de commencer un résumé, je suppose donc que je dois juste trouver le moyen équivalent Angular 5).

javascriptangularasynchronous
12
Peter

Je pense que le callback setTimeout perd une portée à la variable "showElement".

this.showElement = true; // this - is in component object context
setTimeout(function () {
   console.log('hide');
   this.showElement = false; // here... this has different context
}, 2000);

Vous devriez utiliser la fonction flèche:

this.showElement = true;
setTimeout(() => {
  console.log('hide');
  this.showElement = false;
}, 2000);

Ou utilisez bind:

this.showElement = true;
setTimeout(function() {
  console.log('hide');
  this.showElement = false;
}.bind(this), 2000);

passer le contexte approprié à la fonction de rappel setTimeout.

32
Krzysztof Raciniewski

Mise à jour: réponse corrigée.

Comme les autres ont répondu correctement, la raison pour laquelle les modifications ne sont pas reflétées est une référence incorrecte à la référence this.

Notez que lorsque vous utilisez la notation function() { ... }, la référence à this est le contexte de la fonction elle-même. Alors

myFunction() {
    this.showElement = true;
    setTimeout(function() {
      console.log(this.showElement); // Will result in undefined;
      this.showElement = false; // Here, this, reference to context of the function wrapper
    }, 2000);
}

Le passage de la notation de flèche ES6 ci-dessus modifie le contexte de la référence this au contexte parent. Alors

myFunction() {
    this.showElement = true;
    setTimeout(() => {
      console.log(this.showElement); // Will result in true;
      this.showElement = false; // Here, value is updated
    }, 2000);
}

En savoir plus sur le lexical thisici .

3
JeanPaul A.

lorsque vous utilisez le style de fonction "cette" référence ne fonctionne pas, procédez comme suit et votre exemple fonctionnera correctement

this.showElement = true;
setTimeout(() => {
    console.log('hide');
    this.showElement = false;
}, 2000);
3
xelilof

J'ai rencontré le même problème dans mon Angular 7. J'ai dû changer la source du titre et de l'icône dans le bouton:

<button class="btn btn--outline-red text-uppercase font-weight-normal product-action-btn mt-3"
              (click)="addToCart()">
              {{addToCartProps.title}}
              <img style="width:15px; height:15px;" [src]="addToCartProps.src">
            </button>

.......

  addToCartProps = { title: 'Add to Cart', src: '' }

  addToCart() {

    this.addToCartProps.title = 'Adding';
    this.addToCartProps.src = 'assets/images/preloader-white.svg';

    setTimeout(() => {
      this.addToCartProps.title = 'Added';
      this.addToCartProps.src = 'assets/images/checked-icon-white.svg';
      this.cd.markForCheck();
      console.log('timeout 1 ', this.addToCartProps);
    }, 1000);

    setTimeout(() => {
      this.addToCartProps.title = 'Add to cart';
      this.addToCartProps.src = '';
      this.cd.markForCheck();
      console.log('timeout 2 ', this.addToCartProps);
    }, 1500);

  }

Ajouter this.cd.markForCheck () dans la fonction de délai d’attente a résolu le problème dans mon cas.

Auparavant, @artemisian avait aussi commenté dans Angular2, la vue ne se met pas à jour après des modifications variables dans settimeout

0
Nodirabegimxonoyim