angularjs - ngupgrade - Error de enlace del método Angular2: "el valor ha cambiado después de haber sido verificado"

ng-href angular 6

Question

Estoy tratando de hacer un tablero circular en Angular2. Por ejemplo, quiero hacer 10 círculos, pero en realidad este número puede cambiar. Quiero calcular el radio de cada círculo, por lo que sería dinámico y no estático. Ver la imagen, por ejemplo

Este es mi código

@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;
    }
}

Pero me sale el siguiente error:

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]

¿Hay alguna forma mejor de escribir esto para el bucle con *ngFor lugar de escribir esto en un método diferente?

Answer 1

"El valor ha cambiado después de haber sido verificado"

El rendimiento de cualquier value debe ser determinista. Significa que si invoco el value (podría ser calculateRadius() ) con las mismas entradas debería dar el mismo resultado.

Así que pase el index a calculateRadius (o el value le dé ese error)

Answer 2

En el modo de desarrollo (predeterminado), la detección de cambios se ejecuta dos veces para garantizar que los cambios del modelo se hayan estabilizado. Esto significa que el bucle ngFor se evalúa dos veces. Por lo tanto, la propiedad x continuará disminuyéndose la segunda vez que se ejecuta la detección de cambio. Otra actividad en su aplicación también hará que se ejecute la detección de cambios, y x seguirá disminuyéndose. Por lo tanto, debe escribir todas las funciones de vista, como calculateRadius() , suponiendo que se ejecutarán muchas veces. P.ej:

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

La guía de desarrollo de sintaxis de plantilla lo menciona cuando describe expresiones idempotentes .

Esto también resolverá el value has changed after it was checked problema.

También necesita vincular el atributo SVG r con esta sintaxis: [attr.r]="..." , no [style.r]="..." .

Plunker