ERRORエラー：ExpressionChangedAfterItHasBeenCheckedError：それは確認した後に発現が変化している

Question

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

Blockquote

Answer 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}}