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告诉角度对图像数据集有新的更改。

所以最初设置

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

Answer 2

如果没有显示所有代码，很难说出确切的问题，但我建议您阅读这篇介绍此错误及其发生原因的文章https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

ExpressionChangedAfterItHasBeenCheckedError是特殊检查，如果您因为某些原因查看和模型可能不同步，则仅在开发模式下抛出。

Answer 3

尝试像这样添加*ngIf="page.activeSlideIndex && images"：

＆＃13;

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

＆＃13;

Answer 4

这是我找到的解决方案！

首先，分离变更检测器，它将停止检测任何变更。

constructor( private cdRef : ChangeDetectorRef) {
   this.cdRef.detach();
}

然后，每当您想要触发changeDetector绘制DOM时，就手动触发。

ngOnInit() {
    this.dataProvider.getProductData('someProduct').subscribe(res => {
      this.product = _.get(res, '0');
      this.cdRef.detectChanges();
  })
}

如果您有任何子组件可以对DOM进行更改，则也可以在那里触发ChangeDetector。

这解决了我的问题，并提高了性能。

Angular2，错误：检查后表达式已更改。上一个值：'undefined'。当前值：'0

4 个答案: