Angular2 *ngIf=“afunctioncall (en)” les résultats dans la fonction appelée 9 fois

Je suis en train de travailler avec Angular2 et souhaitez qu'un élément conditionnellement affichage basé sur le résultat d'un appel de fonction.

Quand je fais cela, j'ai remarqué que la fonction est appelée plusieurs fois.

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello</h1>
    <div *ngIf="returnsTrue()">
       <h1>World</h1>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }

    returnsTrue(): boolean {
        console.log('Returning true');
        return true;
    }
}

Voir associés plnkr:

http://plnkr.co/edit/MScwD3LaIj9YfBlwWltw?p=preview

Le "Retour" vrai " de la console.journal de sortie 4 fois.

Quelqu'un peut-il m'indiquer pourquoi cela se produit?

Et est de toute façon il l'éviter?

J'ai vu le post suivant, cependant, avec trait au Angulaire 1 et le recueil du cycle de ré-écrit pour Angular2 je ne suis pas sûr que c'est pertinent:

ng-si le fait d'être appelé plusieurs fois qu'il ne le devrait

OriginalL'auteur SamF | 2016-10-04

  1. 9

    Je soupçonne que votre fonction est appelée à chaque changement de cycle de détection, en particulier en dev mode lorsque Angulaire est la vérification de l'expression dans le *ngIf pour les changements de multiples fois, et à le faire est d'appeler la fonction.

    Un moyen de l'éviter serait de modifier une variable de classe dans votre fonction, et de surveiller cette variable dans votre *ngIf:

    @Component({
  selector: 'my-app',
  template: `
    <h1>Hello</h1>
    <div *ngIf="isTrue">
       <h1>World</h1>
    </div>
  `,
})
export class App {
  name:string;
  isTrue:boolean = false;
  constructor() {
    this.name = 'Angular2'

    setTimeout(() => {
      this.returnsTrue();
    }, 5000);

  }

    returnsTrue(): boolean {
        console.log('Returning true');
        this.isTrue = true;
    }
}

    Je adapté votre Plunker de le montrer.

    Cette réponse a fonctionné pour moi une fois que j'ai déplacé la fonction (ce.returnsTrue(); dans le anser) appel à ngOnChanges(). Laissant dans ngOnInit() appelle la fonction une fois plutôt qu'une fois par composant de mise à jour.

    OriginalL'auteur Harry