title: Angular2 method binding error: "value has changed after it was checked"
body: <p>I am trying to make a circle board in Angular2. For the example I want to make 10 circles but in reality this number can change. I want to calculate the radius of each circle, so it would be dynamic and not static. See the picture for example<a href="https://i.stack.imgur.com/UTEBF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UTEBF.png" alt="enter image description here"></a></p>
  
  <p>This is my code</p>
  
  <pre><code>@Component({
      selector:"circle"
      template: `
    &lt;svg&gt;
      &lt;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"&gt;&lt;/circle&gt;
    &lt;svg/&gt;  
      `
  })
  
  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;
      }
  }
  </code></pre>
  
  <p>But I get the following error: </p>
  
  <pre><code>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]
  </code></pre>
  
  <p>Is there maybe a better way of writing this for loop with <code>*ngFor</code> instead of writing this in a separate method?</p>