title: Angular ExpressionChangedAfterItHasBeenChecked
body: <p>I am working on an application with Angular on the frontend and Dropwizard on the backend.</p>
  
  <p>In this application I have a list of food intake, based on the product id in this intake I find a product object in a list of products (with the <strong>getProduct(intake.productId)</strong> function).</p>
  
  <p><a href="https://i.stack.imgur.com/gnWX5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gnWX5.jpg" alt="enter image description here"></a></p>
  
  <p>Such as this. However the three products you see are supposed to be different ones. The food intake has three different product ids. I can't seem to get the right values from the product lists (or they are being overwritten).</p>
  
  <p>My console log does provide some help, it gives this error: 
  <strong>IntakeComponent.html:154 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '3275'. Current value: '3285'.</strong> and I can see getProduct() is being called many more times than it should.</p>
  
  <p>These are the relevant parts of my code:</p>
  
  <p>intakeComponent.ts</p>
  
  <pre><code>product: Product;
  products: Product[];
  
  intakes: Intake[];
  
  constructor(public userService: UserService, public clientService: ClientService, public intakeService: IntakeService, public productService: ProductService) {
  
  }
  
  ngOnInit() {
  
      this.getProducts();
      this.getIntake();
  
  }
  
  public getProducts() {
  
      this.productService.getAllProducts().subscribe(
          products =&gt; {
              this.products = products;
          }
      );
  }
  
  public getIntake() {
  
      setTimeout(() =&gt; {
          this.intakeService.getIntakePerDate(this.selectedClient.id, this.selectedDate).subscribe(
              intake =&gt; {
                  this.intakes = intake;
              }
          );
      });
  }
  
  public getProduct(id: number) {
  
      if (this.products) {
          return this.products.find(product =&gt; product.id === id);
      } else {
          return null;
      }
  }
  </code></pre>
  
  <p>intake.component.html</p>
  
  <pre><code>&lt;tr *ngFor="let intake of intakes"&gt;
  
  &lt;td class="product"&gt;
  
      &lt;input aria-label="Product" matInput [formControl]="myControl"
             [(ngModel)]="intake.productId" [value]="getProduct(intake.productId)?.description"
             (change)="editIntake(intake)" [matAutocomplete]="product"
             placeholder="Product" &gt;
  
  &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I don't have that much experience with Angular yet. If anyone could help me out or provide tips that would be great!</p>