表格提交前的Angular 4空Div元素

Question

在以下HTML内容中，我有一个表单。我可以将此表单提交给调用REST API的服务器以返回一些结果。我返回的结果使用无限卷轴进行分页。

<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 && 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>

现在，当用户在加载第一组结果后滚动单击搜索按钮时，将调用服务器的REST API以获取其他结果。到目前为止一切都很好！

我想要的是以下内容：

用户可以输入其他一些搜索条件，然后再次单击“搜索”按钮。现在这次我想清除已经填充的结果并显示新获取的结果。当用户再次滚动时，我将获取给定搜索条件的其他数据，然后继续。

这是我目前的打字稿！

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;

  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 = '';
  }

  searchPowerPlants() {
    const powerPlantSearchParams = new PowerPlantSearchParams(
      this.model.powerPlantType,
      this.model.powerPlantOrg,
      this.model.powerPlantName,
      this.model.powerPlantStatus);
/*
    this.powerPlantService.searchPowerPlants(powerPlantSearchParams).subscribe(result => {
      this.powerPlants = <PowerPlant[]> result;
    }); */
    // this.scrollCallback = this.searchPowerPlants.bind(this);
    // const something = this.powerPlantService.searchPowerPlants(powerPlantSearchParams, this.currentPage);
    return this.powerPlantService.searchPowerPlants(powerPlantSearchParams, this.currentPage).do(this.processData);
  }

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

  allPowerPlants(onlyActive: boolean = false, page: number = 1): void {
    this.powerPlantService.allPowerPlants(onlyActive, page).subscribe(result => {
      this.powerPlants = <PowerPlant[]> result;
    });
  }
}

有关如何处理此事的任何建议？

编辑：我尝试了不同的方法，但仍然无法解决。我所做的是在搜索按钮的onClick中添加另一个方法，如下所示：

在我的Typescript中，我清空了这个数组（我的Typescript中的其他内容保持不变）：

emptyAndBindNew() {
    this.powerPlants = [];
    alert('In empty method');
  }

通过这种方法我得到一个错误：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]'.
    at viewDebugError (core.es5.js:8421)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8399)
    at checkBindingNoChanges (core.es5.js:8563)
    at checkNoChangesNodeInline (core.es5.js:12430)
    at checkNoChangesNode (core.es5.js:12404)
    at debugCheckNoChangesNode (core.es5.js:13181)
    at debugCheckDirectivesFn (core.es5.js:13083)
    at Object.View_HomeComponent_0._co [as updateDirectives] (HomeComponent.html:45)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
    at checkNoChangesView (core.es5.js:12224)