Angular2 méthode de liaison d'erreur: “la valeur a changé après qu'il a été vérifiée”

Je suis en train de faire un cercle de conseil en Angular2. Pour l'exemple je veux faire 10 cercles, mais en réalité, ce nombre peut changer. Je veux calculer le rayon de chaque cercle, de sorte qu'il serait dynamique et non statique. Voir l'image par exempleAngular2 méthode de liaison d'erreur: “la valeur a changé après qu'il a été vérifiée”

C'est mon code

@Component({
    selector:"circle"
    template: `
  <svg>
    <circle *ngFor='#item of forLength #i=index #l=last #e=even'
            cx="50%" cy="50%" [style.r]="calculateRadius()" stroke="black" stroke-width="5" fill="white"></circle>
  <svg/>  
    `
})

export class CircleComponent{
    public maxRadius:number=25;
    public totalRounds:number=10;
    public x:number=30;

    public calculateRadius():number{
        var distanceBetweenCircles=this.maxRadius/(this.totalRounds-1);
        this.x-= distanceBetweenCircles;
        return this.x;
    }
}

Mais j'obtiens l'erreur suivante:

calculateRadius() in CircleComponent@7:30' has changed after it was checked. 
    Previous value: '-7.500000000000007'. 
    Current value: '-36.66666666666668' in [calculateRadius() in CircleComponent@7:30]

Est là peut-être une meilleure façon de la rédaction de cette boucle avec *ngFor au lieu de la rédaction du présent dans une autre méthode?

Où êtes-vous appeler calculateRadius() dans votre modèle? Où pouvez-vous définir le SVG r attribut dans votre modèle?
Désolé, j'ai écrit une erreur dans le code, j'ai maintenant mis à jour le code. J'utilise calculateRadius() dans le <cercle> tag

OriginalL'auteur Claudiu | 2016-02-29

  1. 15

    Le mode de développement (par défaut), la détection de changement est exécutez deux fois pour s'assurer que les modifications apportées au modèle d'être stabilisée. Cela signifie que le ngFor boucle est évalué deux fois. D'où la propriété x continuera à être décrémenté la deuxième fois de la détection de changement s'exécute. Autre activité dans votre application peut également causer de la détection de changement de courir, et x continuera à être décrémenté. Par conséquent, vous devez écrire toutes les fonctions d'affichage, comme calculateRadius(), en supposant qu'ils seront exécutées plusieurs fois. E. g.:

    public calculateRadius(i):number{
    return this.x - i*this.distanceBetweenCircles;
}

    La Syntaxe du Modèle dev guide mentionne ce quand il décrit la quantité d'expressions.

    Cela permettra également de résoudre le value has changed after it was checked problème.

    Vous avez également besoin de lier SVG attribut r en utilisant cette syntaxe: [attr.r]="...", pas [style.r]="...".

    Plunker

    Merci!!!! Il ne pouvait pas être une meilleure explication. Il travaille maintenant!
    Depuis Angular2 RC3, vous pouvez remédier à cette situation en modifiant la détection de changement de stratedy: importer {ChangeDetectionStrategy} à partir de '@angulaire/core'; @Composant({changeDetection: ChangeDetectionStrategy.OnPush})
    Je vous déconseille d'utiliser OnPush comme une solution à ce problème. OnPush doit être utilisé avec des composants qui dépendent uniquement de leurs propriétés d'entrée et il n'y a pas de propriétés d'entrée ici. Même si nous devions ajouter une entrée de la propriété, un composant de la méthode ne devrait pas modifier la valeur de l'entrée de la propriété de cette manière (dans ce scénario, une entrée de propriété doit être en lecture seule, à mon avis). Aussi, les expressions utilisées dans les modèles doivent être idempotent.

    OriginalL'auteur Mark Rajcok

  2. 0

    “valeur a changé après qu'il a été vérifiée”

    Le retour de toute value doit être déterministe. Signifie que si je l'appelle value (peut-être calculateRadius()) avec le même entrées il devrait donner le même de sortie.

    Donc passer index en calculateRadius (ou quel que soit value est en donnant que l'erreur)

    OriginalL'auteur basarat