Angular 7:从订阅内部调用时，ChangeDetectorRef detectChanges() 会导致无限循环 [英] Angular 7: ChangeDetectorRef detectChanges() causes infinite loop when called from inside a subscription

问题描述

在阅读了与变更检测和类似帖子相关的所有材料但未能解决我的问题后，我在这里发帖.

ChangeDetectorRef detectChanges() 从订阅内部调用时会导致无限循环.如果我不调用 detectChanges，我会收到 ExpressionChangedAfterCheck 错误.严重不知道怎么解决，为什么会出现ExpressionChangedAfterCheck错误

ngAfterViewInit() {this.route.params.subscribe((params) => {this.userId = params.userId;如果(this.userId ！= 未定义){this.loadActivity();}别的 {alert("未提供用户名");}this.cdRef.detectChanges();});}加载活动(){而(this.layers.length > 0){this.layers.pop();}this.loading = true;this.userService.authenticatedGet(ApiUrls.GetLocation(this.userId, this.activity.from.getTime(), this.activity.to.getTime()), {}).subscribe((res:any) =>{this.user = res.user;this.loading = false;//其他逻辑this.cdRef.detectChanges();console.log("加载是" + this.loading);});}

注意:这个问题只有在ngIf绑定的时候才会出现.

解决方案

我解决了这个问题.问题不在于生命周期，而在于 ngx-leaflet 项目中的指令 leaflet.

当我删除与传单相关的指令和绑定时，所有错误都消失了.

即使这样也有错误:

</ng-容器>

我尝试交替添加detectChanges和markForCheck，但还是没有运气.

 onMapReady(map: Map) {this.map = 地图;setTimeout(() => map.invalidateSize(), 1000);this.route.params.subscribe(params => {this.userId = params["userId"];this.loadActivity();});this.cdRef.markForCheck();}

最后，我在写这个答案时放弃了传单，我打算尝试 Angular-Google-Maps.

是的，A-G-M 工作正常.

I am posting here after reading all the material related to change detection and similar post and failing to solve my problem.

ChangeDetectorRef detectChanges() causes infinite loop when called from inside a subscription. If I don't call detectChanges, I get ExpressionChangedAfterCheck error. I seriously don't know how to solve, and why is the ExpressionChangedAfterCheck error comes

ngAfterViewInit() {
    this.route.params.subscribe((params) => {
      this.userId = params.userId;
      if (this.userId != undefined) {
        this.loadActivity();
      }
      else {
        alert("Userid not supplied");
      }
      this.cdRef.detectChanges();
    });
  }

  loadActivity() {
    while(this.layers.length > 0){
      this.layers.pop();
    }
    this.loading = true;
    this.userService.authenticatedGet(ApiUrls.GetLocation(this.userId, this.activity.from.getTime(), this.activity.to.getTime()), {}).subscribe(
      (res:any) => {
        this.user = res.user;
        this.loading = false;
        // other logic
        this.cdRef.detectChanges();
        console.log("Loading is " + this.loading);
      }
    );
  }

Note: This problem is there only when the value is bound with ngIf.

解决方案

I resolved this. Issue was not with the lifecycle but with a directive leaflet from ngx-leaflet project.

When I removed leaflet related directive and bindings all errors vanished.

Error came even with this as well:

<ng-container *ngIf="!loading">
    <div
      class="map"
      leaflet
      (leafletMapReady)="onMapReady($event)"
      [leafletOptions]="options"
      [leafletLayers]="layers"
      [leafletLayersControl]="layersControl">
    </div>
</ng-container>

I tried adding detectChanges and markForCheck alternatively, but again got no luck.

  onMapReady(map: Map) {
    this.map = map;
    setTimeout(() => map.invalidateSize(), 1000);
    this.route.params.subscribe(params => {
      this.userId = params["userId"];
      this.loadActivity();
    });
    this.cdRef.markForCheck();
  }

Finally, I ditched leaflet while writing this answer, and I am going to try Angular-Google-Maps.

And yeah A-G-M is working fine.

这篇关于Angular 7:从订阅内部调用时，ChangeDetectorRef detectChanges() 会导致无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！