___ 확인 후 표현식이 변경되었습니다.

이 단순한 플 런크 의 구성 요소가 왜

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message:string = 'loading :(';

  ngAfterViewInit() {
    this.updateMessage();
  }

  updateMessage(){
    this.message = 'all done loading :)'
  }
}

던지기 :

예외 : App @ 0 : 5의 'I 'm {{message}}식이 확인 된 후 변경되었습니다. 이전 값 : 'I 'm loading :('. 현재 값 : 'I 'm all loading loading :)'[I 'm {{message}} in App @ 0 : 5]

내보기가 시작될 때 내가하고있는 모든 것이 간단한 바인딩을 업데이트하는 것입니까?

drewmoore에 의해 언급 된 바와 같이,이 경우 적절한 해결책은 현재 구성 요소에 대한 변경 감지를 수동으로 트리거하는 것입니다. 이는 객체 의 detectChanges()메소드 ChangeDetectorRef(에서 가져옴 angular2/core) 또는 해당 markForCheck()메소드를 사용하여 수행되며 , 이로 인해 상위 구성 요소도 업데이트됩니다. 관련 예 :

import { Component, ChangeDetectorRef, AfterViewInit } from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App implements AfterViewInit {
  message: string = 'loading :(';

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.message = 'all done loading :)'
    this.cdr.detectChanges();
  }

}

다음은 ngOnInit , setTimeout 및 enableProdMode 접근 방식을 보여주는 Plunkers 입니다.

먼저,이 예외는 개발자 모드에서 앱을 실행할 때만 발생합니다 (기본적으로 베타 0의 경우). enableProdMode()앱을 부트 스트랩 할 때 호출 하면 발생하지 않습니다 ( 참조). 업데이트 된 plunk ).

둘째, 하지마 이 예외가 정당한 이유로 발생하기 때문에 . 즉, dev 모드에서는 모든 변경 라운드 감지 다음에 첫 번째 종료 이후 바인딩이 변경되지 않았 음을 확인하는 두 번째 라운드가 즉시 발생합니다. 변경 감지 자체로 인해 변경이 발생했음을 나타냅니다.

plunk에서을 {{message}}호출 하면 바인딩 이 변경됩니다.이 변경 setMessage()은 ngAfterViewInit후크에서 발생하며 초기 변경 감지 회전의 일부로 발생합니다. 그 자체로는 문제가되지 않습니다. 문제는 setMessage()바인딩 을 변경하지만 새로운 변경 라운드 감지를 트리거하지 않는다는 것입니다. 이는 향후 변경 라운드 감지가 다른 곳에서 트리거 될 때까지이 변경이 감지되지 않음을 의미합니다.

테이크 아웃 : 바인딩을 변경하는 것은 변경 감지를 트리거해야합니다 .

@MarkRajcok이 지적한 답변 의 세 가지 방법과 같이 @Tycho 의 솔루션이 작동하는 것처럼 모든 방법에 대한 예제 요청에 대한 응답으로 업데이트 하십시오 . 그러나 솔직히, 그들은 우리가 ng1에 기대 던 일종의 해킹과 같이 나에게 추악하고 잘못된 느낌을 느낍니다.

있다, 확실히 가끔 당신이보다 더 아무것도를 사용하는 경우 이러한 해킹이 적절한 상황,하지만 아주 가끔으로, 당신이 완전히의 반응 특성을 수용하기보다는 프레임 워크를 싸우고 있다는 신호입니다.

이것에 접근하는 더 관용적 인 "Angular2 방식"인 IMHO는 다음과 같은 라인입니다 : ( plunk )

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message | async}} </div>`
})
export class App {
  message:Subject<string> = new BehaviorSubject('loading :(');

  ngAfterViewInit() {
    this.message.next('all done loading :)')
  }
}

ngAfterViewChecked() 나를 위해 일했다 :

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

constructor(private cdr: ChangeDetectorRef) { }
ngAfterViewChecked(){
   //your code to update the model
   this.cdr.detectChanges();
}

각도 코어에서 ChangeDetectionStrategy를 추가하여이 문제를 해결했습니다.

import {  Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})

ngOnInit멤버 변수를 변경했기 때문에 사용할 수 없습니까 message?

자식 구성 요소에 대한 참조에 액세스 @ViewChild(ChildComponent)하려면와 함께 기다려야합니다 ngAfterViewInit.

더티 픽스는 updateMessage()setTimeout과 같이 다음 이벤트 루프에서 in 을 호출하는 것 입니다.

ngAfterViewInit() {
  setTimeout(() => {
    this.updateMessage();
  }, 1);
}

이를 위해 위의 답변을 시도했지만 많은 버전의 Angular (6 이상)에서 작동하지 않습니다.

첫 바인딩 후 변경이 필요한 머티리얼 컨트롤을 사용하고 있습니다.

    export class AbcClass implements OnInit, AfterContentChecked{
        constructor(private ref: ChangeDetectorRef) {}
        ngOnInit(){
            // your tasks
        }
        ngAfterContentChecked() {
            this.ref.detectChanges();
        }
    }

내 대답을 추가하면 특정 문제를 해결하는 데 도움이됩니다.

기사 오류 에 대해 알아야 할 모든 것ExpressionChangedAfterItHasBeenCheckedError 대해 는 동작을 자세하게 설명합니다.

설정 문제 ngAfterViewInit는 변경 감지 처리 된 DOM 업데이트 후에 수명주기 후크가 실행 된다는 것 입니다. 이 후크에서 템플릿에 사용되는 속성을 효과적으로 변경하면 DOM을 다시 렌더링해야합니다.

  ngAfterViewInit() {
    this.message = 'all done loading :)'; // needs to be rendered the DOM
  }

그리고 이것은 또 다른 변화 감지주기를 필요로하며 Angular는 설계 상 단 하나의 다이제스트 주기만 실행합니다.

기본적으로 두 가지 대안이 있습니다.

• 사용 중 비동기 적 속성을 업데이트 setTimeout, Promise.then또는 비동기 관찰 템플릿에서 참조

• DOM 업데이트 전 ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked에서 속성 업데이트를 수행합니다.

올바른 라이프 사이클 후크에서 메시지를 업데이트하면됩니다.이 경우 ngAfterContentChecked에는ngAfterViewInit ngAfterViewInit에서 변수 메시지에 대한 검사가 시작 되었기 때문에, 아직 종료되지 않습니다.

참조 : https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview

코드는 다음과 같습니다.

import { Component } from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message: string = 'loading :(';

  ngAfterContentChecked() {
     this.message = 'all done loading :)'
  }      
}

Plunker 의 실무 데모 를 참조하십시오 .

이 오류는 기존 값이 초기화 된 직후 업데이트되기 때문에 발생합니다. 따라서 기존 값이 DOM에서 렌더링 된 후 새로운 값을 업데이트하면 정상적으로 작동합니다. 각도 디버깅 "이 확인 된 후 표현이 변경"

예를 들어 사용할 수 있습니다

ngOnInit() {
    setTimeout(() => {
      //code for your new value.
    });

}

또는

ngAfterViewInit() {
  this.paginator.page
      .pipe(
          startWith(null),
          delay(0),
          tap(() => this.dataSource.loadLessons(...))
      ).subscribe();
}

보시다시피 setTimeout 메서드에서 시간을 언급하지 않았습니다. JavaScript API가 아닌 브라우저 제공 API이므로 브라우저 스택에서 별도로 실행되며 호출 스택 항목이 완료 될 때까지 기다립니다.

필립 로버츠 (Philip Roberts)는 브라우저 API가 개념을 불러 일으키는 방법을 유튜브 비디오 (이벤트 루프 란 무엇인가)에서 설명합니다.

ngOnInt ()-Method에서 updateMessage ()를 호출 할 수도 있습니다. 적어도 그것은 나를 위해 작동합니다

ngOnInit() {
    this.updateMessage();
}

RC1에서는 예외가 발생하지 않습니다.

rxjs Observable.timer함수를 사용하여 타이머를 만든 다음 구독에서 메시지를 업데이트 할 수도 있습니다 .                    

Observable.timer(1).subscribe(()=> this.updateMessage());

ngAfterViewInit () 가 호출 되면 코드가 업데이트되므로 오류가 발생합니다 . ngAfterViewInit가 발생할 때 초기 값이 변경되었음을 의미합니다. ngAfterContentInit () 에서 해당 값을 호출 하면 오류가 발생하지 않습니다.

ngAfterContentInit() {
    this.updateMessage();
}

나는 평판이 충분하지 않기 때문에 @Biranchi의 게시물에 대해 언급 할 수 없었지만 문제가 해결되었습니다.

한 가지 유의할 사항! 구성 요소에 changeDetection : ChangeDetectionStrategy.OnPush 를 추가 해도 작동하지 않고 하위 구성 요소 (멍청한 구성 요소)도 부모에 추가해보십시오.

이것은 버그를 수정했지만 이것의 부작용이 무엇인지 궁금합니다.

datatable로 작업하는 동안 비슷한 오류가 발생했습니다. 다른 * ngFor datatable 내에서 * ngFor를 사용하면 각도 변경주기를 방해하는이 오류가 발생합니다. 따라서 datatable 내부에서 datatable을 사용하는 대신 하나의 일반 테이블을 사용하거나 mf.data를 배열 이름으로 바꾸십시오. 이것은 잘 작동합니다.

가장 간단한 해결책은 다음과 같습니다.

1. 함수 또는 설정자를 통해 변수에 값을 할당하는 한 가지 구현을하십시오.
2. (static working: boolean)이 함수가 존재하는 클래스에서 클래스 변수 를 작성하고 함수를 호출 할 때마다 원하는대로 변수 를 작성하십시오 . 함수 내에서 working의 가치가 사실이라면, 아무 것도하지 않고 바로 돌아갑니다. 그렇지 않으면 원하는 작업을 수행하십시오. 작업이 완료된 후 (예 : 코드 줄 끝 또는 값 할당이 완료되면 subscribe 메소드 내에서)이 변수를 false로 변경하십시오.