Angular 4應用程序中的ExpressionChangedAfterItHasBeenCheckedError錯誤

Question

我有一個HTML，它顯示從數據庫中獲取的一些元素：這是我的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>

如我們所見，我在TypeScript中調用了2個不同的函數，如下所示：

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

我在Angular應用程序中遇到一個非常奇怪的錯誤：

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

該行中發生錯誤：

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

我的代碼段是什么問題，以及如何消除此錯誤：這就是全部內容！

1. 向用戶顯示“搜索”表單，他可以在其中輸入其不同的搜索條件

2. 當用戶單擊“搜索”按鈕時，我將調用REST API后端並獲取一些數據（將獲取限制為10個條目）。

3. 當用戶向下滾動結果條目時，我會向他加載另外的10個條目，只要我能找到更多數據，它就會一直持續下去。

4. 現在，如果用戶希望搜索其他條件，則可以再次輸入搜索字段並提交表單。

5. 提交表單后，我必須重置所有舊的搜索結果，並填充從后端REST API獲得的新條目！

上面的代碼可以做到這一點，但是在執行第4點后，它就會出錯！ 有任何想法嗎？ 這是我遇到的錯誤的屏幕截圖！

編輯：PowerPlantsService包含以下方法：

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

我想您的錯誤來自上一個函數的最后一行。 你能試試看嗎？

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

編輯在您的服務中，用let powerPlantArray替換const powerPlantArray 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;
}