Angular2, Error : 확인 후 표현식이 변경되었습니다. 이전 값 : 'undefined'. 현재 값 : '0

Question

carousel은 특정 이미지의 수를 얻기 위해 activeSlideIndex을 사용했습니다. 그래서 나는

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '0'. 

HTML 파트 콘솔에서 오류가 발생합니다 :

<carousel class="carousel slide"[(activeSlide)]="page.activeSlideIndex"> 
       <slide *ngFor="let image of images; let i = index "> 
        <p>Image {{i+1}}</p> 
        <img src="{{image.image}}" > 
        <p > 
        <input type="file" name="file" id="file" (change)="readUrl($event)" /> 
        <label (click)="changed(page.activeSlideIndex)">Change</label> 
        </p> 
       </slide> 
       </carousel> 

TS :

images:any = [{image :'img1.jpg', change:'change'},{image: 'img2.jpg', change:'add'},{image:'img3.jpg', change:'edit'},{image:'im4.jpg',change:'delete' }]; 

    changed(index){ 
     console.log(index); 
     } 

Answer 1

시도 같은 *ngIf="page.activeSlideIndex && images"를 추가 :

<carousel *ngIf="page.activeSlideIndex && images" class="carousel slide" [(activeSlide)]="page.activeSlideIndex"> 
 
       <slide *ngFor="let image of images; let i = index "> 
 
        <p>Image {{i+1}}</p> 
 
        <img src="{{image.image}}" > 
 
        <p > 
 
        <input type="file" name="file" id="file" (change)="readUrl($event)" /> 
 
        <label (click)="changed(page.activeSlideIndex)">Change</label> 
 
        </p> 
 
       </slide> 
 
       </carousel>

Answer 2

모든 코드가 표시 될 때 정확한 문제를 얘기하기 어렵다, 그러나 나는이 오류를 설명하는이 놀라운 기사를 읽고 제안하고 왜 https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

ExpressionChangedAfterItHasBeenCheckedError 만 발생합니다 특별 검사입니다 일어나고있다 on dev mode. 어떤 이유로보기 및 모델이 동기화되지 않을 수 있습니다.

Answer 3

ChangeDetectorRef를 사용하여 이미지의 데이터 세트에 새로운 변경 사항이 있음을 알리십시오.

그래서 처음에 참조

image.any = []; 

constructor(private cdr: ChangeDetectorRef) {} 

ngAfterViewInit() { 
    this.image.any = [{image :'img1.jpg', change:'change'},{image: 'img2.jpg', change:'add'},{image:'img3.jpg', change:'edit'},{image:'im4.jpg',change:'delete' }]; 

    this.cdr.detectChanges(); 
    } 

확인이 설정 : 응답에 대한 https://stackblitz.com/edit/angular-pybs8e?file=app%2Fapp.component.ts