primeng p-accordion由ui-state-active

Question

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

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

错误

  

webpack-internal：///。/ src / app / shared / error / error.service.ts：57 ######   UNHANDLED ERROR ###### GlobalErrorHandler.handleError @   的WebPack内部：///./src/app/shared/error/error.service.ts：57   的WebPack内部：///./src/app/shared/error/error.service.ts：69   error.message：ExpressionChangedAfterItHasBeenCheckedError：Expression   检查后发生了变化。上一个值：'ui-state-active：   showResult”。当前值：'ui-state-active：true'。   GlobalErrorHandler.handleError @   的WebPack内部：///./src/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);
  };
  ...
}

搜索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>

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

结果-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"
            ...

结果-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 OS：win32 x64 Angular：5.2.4 ......   动画，常见，编译器，编译器 - cli，核心，表单...... http，   平台浏览器，平台浏览器动态，路由器

     

@ angular / cli：1.7.3 @ angular / flex-layout：2.0.0-beta.12   @ angular-devkit / build-optimizer：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