Angular2，错误：检查后表达式已更改。先前的值：'未定义'。当前值：'0

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经使用了carousel，因为我已经使用activeSlideIndex来获取特定图像的编号。所以，我得到一个错误控制台Angular2，错误：检查后表达式已更改。先前的值：'未定义'。当前值：'0

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

回答：

尝试添加*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>

回答：

这是很难说确切的问题时，将显示不是所有的代码，但我建议阅读这个惊人的文章描述该错误以及为什么它正在发生https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

ExpressionChangedAfterItHasBeenCheckedError是特殊的支票只抛出在开发模式下，如果您查看和模型由于某些原因可能不同步。

回答：

尝试使用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

以上是 Angular2，错误：检查后表达式已更改。先前的值：'未定义'。当前值：'0 的全部内容， 来源链接： utcz.com/qa/262653.html

回到顶部