Angular 4应用程序中的ExpressionChangedAfterItHasBeenCheckedError错误

Question

I have a HTML that displays some elements that it gets from the database: Here is my HTML:

<div class="home-page">
  <div class="container page">
    <div class="row">

      <div class="col-md-11 col-xs-10">
        <h2>Search</h2>
        <hr>
        <form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && emptyAndBindNew(); searchPowerPlants()" #f="ngForm" novalidate>
          <div class="form-group col-xs-3" >
            <label for="powerPlantName">PowerPlant Name</label>
            <input type="text" class="form-control-small" [ngClass]="{ 'has-error': f.submitted && !powerPlantName.valid }" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
          </div>
          <div class="form-group col-xs-3" >
            <label for="powerPlantType">PowerPlant Type</label>
            <select class="form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType">
              <option value="" disabled>--Select Type--</option>
              <option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
                {{ powerPlantType }}
              </option>
            </select>
          </div>
          <div class="form-group col-xs-3" >
            <label for="organizationName">Organization Name</label>
            <input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" />
          </div>
          <div class="form-group col-xs-3" >
            <label for="powerPlantStatus">PowerPlant Active Status</label>
            <select class="form-control" [(ngModel)]="model.powerPlantStatus" name="powerPlantStatus">
              <option value="" disabled>--Select Status--</option>
              <option [ngValue]="powerPlantStatus" *ngFor="let powerPlantStatus of powerPlantStatuses">
                {{ powerPlantStatus }}
              </option>
            </select>
          </div>
          <div class="form-group col-md-3 col-xs-4">
            <button [disabled]="loading" class="btn btn-primary">Search</button>
            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
            <button type="button" (click)="resetForm()" class="btn btn-primary">Reset</button>
          </div>
        </form>
        <hr>
        <div>

          <ul id="infinite-scroller" appInfiniteScroller scrollPerecnt="70" [immediateCallback]="true" [scrollCallback]="scrollCallback">
            <li *ngFor="let powerPlant of powerPlants">{{powerPlant.powerPlantName}}</li>
          </ul>

        </div>
      </div>
    </div>
  </div>
</div>

As we can see I'm calling 2 different functions in my Typescript which is as below:

import { Component, OnInit } from '@angular/core';

import { PowerPlantService, UserService } from '../shared';
import { User } from '../shared/models/user.model';
import { PowerPlant } from '../shared/models/powerplant.model';
import {PowerPlantSearchParams} from '../shared/models/powerplantsearchparams.model';

@Component({
  selector: 'app-home-page',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  // Represents the PowerPlantTypes
  powerPlantTypes = ['RampUpType', 'OnOffType'];
  // Represents the status of a PowerPlant
  powerPlantStatuses = ['Active & Disabled', 'Active', 'Disabled'];
  // Represents the search form
  model: any = {};
  // represents the list of PowerPlant data
  powerPlants: PowerPlant[] = [];
  scrollCallback;

  currentPage = 1;

  // Indicates if the searchButton was clicked or not!
  isSearchButtonClicked = false;

  constructor(private powerPlantService: PowerPlantService) {
    // this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    // Set the initial values for the drop down fields in the UI
    this.resetForm();

    this.scrollCallback = this.searchPowerPlants.bind(this);
  }

  ngOnInit() {}

  resetForm() {
    this.model.powerPlantOrg = '';
    this.model.powerPlantName = '';
    this.model.powerPlantType = '';
    this.model.powerPlantStatus = '';
  }

  emptyAndBindNew() {
    this.isSearchButtonClicked = true;
  }

  searchPowerPlants() {
    if (this.isSearchButtonClicked === true) {
      this.isSearchButtonClicked = false;
      // Reset the old entries
      this.powerPlants = [];
      this.currentPage = 1;
      this.searchPowerPlants();
    } else {
      alert('page number is ' + this.currentPage);
      const powerPlantSearchParams = new PowerPlantSearchParams(
        this.model.powerPlantType,
        this.model.powerPlantOrg,
        this.model.powerPlantName,
        this.model.powerPlantStatus);

      return this.powerPlantService.searchPowerPlants(powerPlantSearchParams, this.currentPage).do(this.processData);
    }
  }

  private processData = (newPowerPlants) => {
    this.currentPage++;
    // this.powerPlants = this.powerPlants.concat(newPowerPlants.json());
    this.powerPlants = this.powerPlants.concat(newPowerPlants);
  }
}

I get a very strange error in my Angular application:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''.

The error happens in this line:

        <li *ngFor="let powerPlant of powerPlants">{{powerPlant.powerPlantName}}</li>

What is the problem with my piece of code and how to get rid of this error: Here is what the whole thing is about!

1. The user is presented with a Search form where he can enter his different search criteria

2. When the user clicks Search button, I call a REST API backend and fetch some data (I limit the fetch to 10 entries).

3. When the user scrolls down on the result entries, I load him additional 10 entries and this keeps going on as long as I can find more data.

4. Now if the user wishes to search for some other criteria, he enters again the search fields and submits the form.

5. When the form is submitted, I have to reset all the old search results and populate the new entries that I get from the backend REST API!

The above code does that, but it runs into error after I do point number 4! Any ideas? Here is a screenshot of the error that I face!

EDIT: The PowerPlantsService contains the following method:

private generateData() {
    const powerPlantArray: PowerPlant[] = [];
    for (let i = 0; i < 20; i++) {
      if (i % 2 === 0) {
        const p: PowerPlant = {
          powerPlantId: i,
          powerPlantName: `PowerPlant ${i}`,
          minPower: 100,
          maxPower: 200,
          powerPlantType: 'OnOffType'
        };
        powerPlantArray.push(p);
      } else {
        const p: PowerPlant = {
          powerPlantId: i,
          powerPlantName: `PowerPlant ${i}`,
          minPower: 100,
          maxPower: 200,
          powerPlantType: 'RampUpType',
          rampPowerRate: 10,
          rampRateInSeconds: 2
        };
        powerPlantArray.concat(p);
      }
    }
    return powerPlantArray;
  }

  searchPowerPlants(searchParams: PowerPlantSearchParams, page: number): Observable<any> {
    const params: string[] = [];
    // pageNumber is mandatory
    if (page) {
      params.push(`page=${page}`);
    } else {
      params.push(`page=1`);
    }
    // All the other fields are optional
    if (searchParams.powerPlantStatus === 'Active') {
      params.push(`onlyActive=true`);
    } else if (searchParams.powerPlantStatus === 'Disabled') {
      params.push(`onlyActive=false`);
    }
    if (searchParams.powerPlantType) {
      params.push(`powerPlantType=${searchParams.powerPlantType}`);
    }
    if (searchParams.powerPlantOrg) {
      params.push(`org=${searchParams.powerPlantOrg}`);
    }
    if (searchParams.powerPlantName) {
      params.push(`name=${searchParams.powerPlantName}`);
    }
    // return this.apiService.get(`${this.allPowerPlantsURL}?${params.join('&')}`);
    return Observable.of(this.generateData());
  }

Answer 1

I'm rather guessing your error comes from the last line of your last function. Could you try this instead ?

this.setTimeout(() => this.powerPlants = this.powerPlants.concat(newPowerPlants));

EDIT In your service, replace the const powerPlantArray with a let powerPlantArray :

private generateData() {
  let powerPlantArray: PowerPlant[] = [];
  for (let i = 0; i < 20; i++) {
    if (i % 2 === 0) {
      const p: PowerPlant = {
        powerPlantId: i,
        powerPlantName: `PowerPlant ${i}`,
        minPower: 100,
        maxPower: 200,
        powerPlantType: 'OnOffType'
      };
      powerPlantArray.push(p);
    } else {
      const p: PowerPlant = {
        powerPlantId: i,
        powerPlantName: `PowerPlant ${i}`,
        minPower: 100,
        maxPower: 200,
        powerPlantType: 'RampUpType',
        rampPowerRate: 10,
        rampRateInSeconds: 2
      };
      powerPlantArray.concat(p);
    }
  }
  return powerPlantArray;
}