Angular2，错误：检查后表达式已更改。以前的值：'未定义'。当前值：'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

尝试使用 ChangeDetectorRef 告诉 angular 图像数据集有新的变化。

所以最初设置

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