title: Angular 6 Expression has changed after it was checked. Previous value: 'null: 3'
body: <p>I guess I just do not understand how ngFor works. Why does angular check the value so many times? Keep in mind, that I want the value to be updated. Please explain, because I feel completely lost.</p>
  
  <p>To give some background info:</p>
  
  <p>I have a product page that checks the shopping cart items and displays how many items are in the shopping cart of a particular product. Currently, it is displaying 11, when there are only two items in the shopping cart. </p>
  
  <p>The shopping cart is kept in localStorage as an object listing the items that a user has added to the cart. I can see in Chrome dev tools> Application> cart - the object and how many items it contains.</p>
  
  <p>The following is my Product model, which is the same structure as my shopping cart object:</p>
  
  <pre><code>export interface Product {
    product: {
      id: number;
      name: string;
      category: string;
      price: string;
      ts: string;
      product_image_id: number;
      product_image: string;
      enabled: boolean;
      counter: number;
    };
  }
  </code></pre>
  
  <p>The following is the getTotalItems(item) method that counts how many items are in the shopping cart of a particular product, which basically increments the item.counter when there is a match to the product's id:</p>
  
  <pre><code> getTotalItems(item) {
    if (localStorage.getItem("cart")) {
      for (let u = 0; u &lt; this.cartObj.cart.products.product.length; u++) {
        if (item.id === this.cartObj.cart.products.product[u].id) {
          item.counter += this.cartObj.cart.products.product[u].counter;
        }
      }
    } else {
      item.counter = 0;
    }
    return item.counter;
  }
  </code></pre>
  
  <p>Notice that item.counter is being updated within the for loop, but the for loop should only be available for the two items in the shopping cart. I want to know why does angular try to update it 11 times:</p>
  
  <pre><code>for (let u = 0; u &lt; this.cartObj.cart.products.product.length; u++) {
    if (item.id === this.cartObj.cart.products.product[u].id) {
      item.counter += this.cartObj.cart.products.product[u].counter;
    }
  }
  </code></pre>
  
  <p>The following is the html that calls the geTotaltItems(item) method, from the shopping cart service, along with filteredProducts coming from my product service, located in the constructor of the product component:</p>
  
  <pre><code> this.prdSrvc.getAllProducts().subscribe(resProd =&gt; {
    this.filteredProducts = this.products = resProd.products;
  
      &lt;ng-container *ngFor="let item of filteredProducts; let i = index"&gt;
            &lt;div class="card-body"&gt;
              &lt;h5 class="card-title"&gt;{{ item.name }}&lt;/h5&gt;
              &lt;p class="card-text"&gt;{{ item.category }}&lt;/p&gt;
              &lt;p class="card-text"&gt;{{ item.price | currency }}&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="card-footer"&gt;
              &lt;div class="row no-gutters"&gt;
                &lt;div class="col-2"&gt;
                  &lt;button
                    (click)="removeFromCart(item)"
                    class="btn btn-secondary btn-block"
                  &gt;
                    -
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="col text-center"&gt;
                  {{ this.cartSrvc.getTotalItems(item) }} in cart
                &lt;/div&gt;
                &lt;div class="col-2"&gt;
                  &lt;button
                    (click)="addToCart(item)"
                    class="btn btn-secondary btn-block"
                  &gt;
                    +
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>In the getTotalItems method, I place the following console.log:</p>
  
  <pre><code>console.log("item.id: " + item.id + "item.counter: " + item.counter);
  </code></pre>
  
  <p>At first, it was working just fine, finding the item.id and the counter would increment as it found a matching id in the shopping cart. In my case, there were only two items in the shopping cart:</p>
  
  <p><a href="https://i.stack.imgur.com/qvoQw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qvoQw.png" alt="As you can see by the screenshot, the product page loads just fine, with the exception that it is not showing the number items in the shopping cart correctly"></a></p>
  
  <p><a href="https://i.stack.imgur.com/BRRmu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BRRmu.png" alt="This is a screenshot of Chrome dev tools showing the contents of the cart and  the error"></a></p>
  
  <p>As you can see, once it passed the second item, it continued to check, which causes the error.</p>
  
  <p>My question is basically, why will it not stop once the for loop has gone through all the items in the shopping cart? In this case, there are only two items, why does Angular keep checking after the two items?</p>
  
  <p>Thanks in advance</p>
  
  <p>BTW, I have also tried to limit how much getTotalItems is called, by doing the following, with the same results:</p>
  
  <pre><code>             &lt;div
                  *ngIf="item.counter &gt; 0; else justZero"
                  class="col text-center"
                &gt;
                  {{ this.cartSrvc.getTotalItems(item) }} in cart
                &lt;/div&gt;
                &lt;ng-template #justZero&gt;
                  &lt;div class="col text-center"&gt;0 in cart&lt;/div&gt;
                &lt;/ng-template&gt;
  </code></pre>