ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改答案

【问题标题】：ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checkedERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改
【发布时间】：2018-05-10 13:12:21
【问题描述】：

import { Component } from '@angular/core'; import { PeriodsService } from '../periods';

@Component({
    selector: 'app-control-panel',
    templateUrl: './control-panel.component.html',
    styleUrls: ['./control-panel.component.css'] 
}) 
export class ControlPanelComponent {
    private selectedPeriod;
    private selectedPosition;

    constructor(
        private periodsService: PeriodsService,
        private positionsService: PositionsService,
        private classifierService: ClassifierService
    ) {
        this.periodsService.periodChange.subscribe(period => {
            this.selectedPeriod = period;
        });
    }

    get periodTitle() {
        return this.selectedPeriod.p_display_name;
    }

    }


    //Template file: control-panel.component.html
    {{periodTitle}}

块引用

【问题讨论】：

标签： angular angular-components

【解决方案1】：

使用ChangeDetectorRef：

import { Component, ChangeDetectorRef } from '@angular/core'; import { PeriodsService } from '../periods';

@Component({
    selector: 'app-control-panel',
    templateUrl: './control-panel.component.html',
    styleUrls: ['./control-panel.component.css'] 
}) 
export class ControlPanelComponent {
    private selectedPeriod;
    private selectedPosition;

    constructor(
        private periodsService: PeriodsService,
        private positionsService: PositionsService,
        private classifierService: ClassifierService,
        private cdRef: ChangeDetectorRef ,
    ) {

    }

    ngOnInit(){
        this.periodsService.periodChange.subscribe(period => {
            this.selectedPeriod = period;
            this.cdRef.detectChanges();
        });
    }
    get periodTitle() {
        return this.selectedPeriod.p_display_name;
    }

    }


    //Template file: control-panel.component.html
    {{periodTitle}}

【讨论】：

【解决方案2】：

ChangeDetectorRef.detectChanges() 通过在孩子和父母之间共享数据

import { Component,
     Input,
     ChangeDetectionStrategy,
     ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
 })



export class ChildComponent {
@Input() data: string[];

constructor(private cd: ChangeDetectorRef) {}

    refresh() {
    this.cd.detectChanges();
   }
 }

【讨论】：