在改变一些accordionTabs之间的焦点后，我正面临一个ExpressionChangedAfterItHasBeenCheckedError . 我不确定问题出在哪里，因为主要解决方案已经在我们系统的先前版本中运行 . 到目前为止我所做的改变与服务有关，据我所知，它们不会影响面板改变焦点的行为 . 所以如果有人能在这里给我一些帮助，我真的很感激 .

我的主要组件需要控制p-accordionTabs . 为此，它使用p-accordionTab @ index和所选属性（如下面的日志中所示） . 首次打开页面时，只显示第一个选项卡，必须打开它 . 通过单击其中的“搜索”按钮，它应显示第二个选项卡并将焦点更改为它 . 这就是我开始收到此错误的地方 .

错误

webpack-internal：/// . / src / app / shared / error / error.service.ts：57 ###### UNHANDLED ERROR ###### GlobalErrorHandler.handleError @ webpack-internal：/// ./src/app/shared/error/error.service.ts:57 webpack-internal：/// . / src / app / shared / error / error.service.ts：69 error.message：ExpressionChangedAfterItHasBeenCheckedError：Expression已更改检查后 . 上一个值：'ui-state-active：showResult' . 当前值：'ui-state-active：true' . GlobalErrorHandler.handleError @ webpack-internal：///./scrc/app/shared/error/error.service.ts:69 webpack-internal：/// . / src / app / shared / error / error.service.ts ：70错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改 . 上一个值：'ui-state-active：showResult' . 当前值：'ui-state-active：true' . at viewDebugError（webpack-internal：///./node_modules/@angular/core/esm5/core.js：9986）at expressionChangedAfterItHasBeenCheckedError（webpack-internal：///./node_modules/@angular/core/esm5/core . js：9964）在checkBindingNoChanges（webpack-internal：///./node_modules/@angular/core/esm5/core.js：10131）

search.component.html

<p-accordion [activeIndex]="index" (onOpen)="onTabOpen($event)">                
    <p-accordionTab header="Search" (onOpen)="onTabOpen($event)" selected="showSearch">
        <app-search-form (onSearch)="goToNextPanel($event)" *ngIf="showSearch"></app-search-form>
    </p-accordionTab>

    <p-accordionTab header="Results" *ngIf="index >= 1" selected="showResult">
        <app-result-list (showResultChange)="goToNextPanel($event)"></app-result-list>
    </p-accordionTab>
    ...
</p-accordion>

search.component.ts

export class SearchComponent implements OnInit {
  index: number = 0;
  showSearch: boolean;
  showResults: boolean;

  @Input() omitDetails: boolean;

  searchResultParametersmeters: SearchResultParametersmeters[];
  @Input() id: string;
  @Output() idChange = new EventEmitter<string>();

  constructor(
    private router: Router,
  ) {
    this.setPanelsVariables();
  };

  ngOnInit() {
    this.id = ''
  }

  setPanelsVariables() {
    this.showSearch = true;
    this.showResults = false;
  }

  onTabOpen(e) {
    this.index = e.index;
  };

  goToNextPanel(event: any) {
    this.index ++;
    this.setPanelsVariables();
    if ( this.index === 1 ) {
      this.showResults = true;
    };
    console.log('goToNextPanel::new index: ', this.index);
  };
  ...
}

search-form.component.html

<form [formGroup]="groupForm" novalidate (ngSubmit)="search()" name="searchForm">
    <div class="ui-g ui-fluid">
        <div class="ui-g-12 ui-md-9 ui-g-nopad" >
            <div *ngIf="selectedSearch == 1">
                <app-search-form [parentGroup]="groupForm.controls.searchForm"></app-search-form>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <div class="ui-g">
        <div class="ui-g-12 ui-md-6">
            <button pButton type="submit" class="btn btn-primary pull-left app-inline-button" label="Search"></button>
            <button pButton type="button" class="app-inline-button" label="Cancel" (click)="cancel()"></button>
        </div>
    </div>
</form>

search-form.component.ts

export class SearchFormComponent implements OnInit, OnChanges, OnDestroy {
  searchResultParameters: CustomerSearchResultParameters[];
  @Output() onSearch = new EventEmitter<FormGroup>();
  ...
  search() {
    if (this.groupForm.invalid) {
      return;
    }
    this.onSearch.emit(this.groupForm.value); this.searchService.setShareSearchForm(this.groupForm);
  };

result-list.component.html

<div class="ui-g">
    <div class="ui-g-12">
        <!-- Change detection controller -->
        <ng-container *ngIf="!rerender">

            <!-- Main table -->
            <p-table #dt [value]="SearchResultParameters"
            ...

result-list.component.ts

export class ResultListComponent implements OnInit, OnDestroy {

  searchForm: FormGroup;
  searchResultParameters: SearchResultParameters[];

  @Input() showResult = true;
  @Output() showResultChange = new EventEmitter<boolean>();

  constructor(
    private searchService: SearchService,
    private cdRef: ChangeDetectorRef,
  ) {
    this.subscriptions.push(
      this.searchService.searchForm$
      .subscribe( data => {
          this.searchForm = data;
      })
    );
  }

  ngOnInit() {
    if (!this.mainSearch) {
      this.tableStyle = {'table-layout':'auto', 'font-size': '12px'};
    }
    this.searchService.searchResults(this.searchForm).subscribe( data => {
        console.log('<-- app-customer-search::data:', data);
        this.searchResultParameters = data;
        if(typeof this.searchResultParameters !== 'undefined'){
          this.totalRecords = this.searchResultParameters.length;
        };
    });
  }
  ...

版本

“primeng”：“^ 5.2.3”，npm --version 5.5.1 Angular CLI：1.7.3节点：8.4.0操作系统：win32 x64 Angular：5.2.4 ...动画，通用，编译器，编译器 - cli，core，forms ... http，platform-browser，platform-browser-dynamic，router @ angular / cli：1.7.3 @ angular / flex-layout：2.0.0-beta.12 @ angular-devkit / build-优化器：0.3.2 @ angular-devkit / core：0.3.2 @ angular-devkit / schematics：0.3.2 @ ngtools / json-schema：1.2.0 @ ngtools / webpack：1.10.2 @ schematics / angular：0.3 . 2 @ schematics / package-update：0.3.2 typescript：2.4.2 webpack：3.11.0

angular primeng