[英]expression has changed after it was checked in loading component
I have repetitive problem in angular but I had search a lot about this problem and use all of Technics that answer in stackoverflow and... . 我在角度上有重复性问题,但是我对此问题进行了很多搜索,并使用了所有在stackoverflow和...中回答的技术。
my problem is in my loader component when I subscribe over than one. 我的问题是当我订阅多个时,在加载程序组件中。
this is my loader component 这是我的装载机组件
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, DoCheck, OnChanges, AfterViewInit, OnInit } from '@angular/core';
import { Subject, BehaviorSubject } from 'rxjs';
import { LoaderService } from './loader.service';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.scss']
})
export class LoaderComponent implements OnInit {
isLoading: BehaviorSubject<boolean>=this.loaderService.isLoading;
constructor(private loaderService: LoaderService, private changeDetector: ChangeDetectorRef) {
}
color = 'accent';
mode = 'indeterminate';
value = 50;
ngOnInit(): void {
}
}
and this is my service loader component 这是我的服务加载器组件
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LoaderService {
constructor() { }
isLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
count=0;
show(): void {
debugger
console.log(`show`+this.count++)
this.isLoading.next(true);
}
hide(): void {
debugger
console.log(`hide`+this.count++)
this.isLoading.next(false);
}
}
and this is my interceptor loader 这是我的拦截装载机
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { LoaderService } from './loader/loader.service';
@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
constructor(public loaderService: LoaderService) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.loaderService.show();
return next.handle(req).pipe(
finalize(() => {this.loaderService.hide(); })
);
}
}
my error message is " 我的错误讯息是
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: [object Object]'. Current value: 'ngIf: true'.
at viewDebugError (core.js:17871)
at expressionChangedAfterItHasBeenCheckedError (core.js:17859)
at checkBindingNoChanges (core.js:18059)
at checkNoChangesNodeInline (core.js:27635)
at checkNoChangesNode (core.js:27624)
at debugCheckNoChangesNode (core.js:28228)
at debugCheckDirectivesFn (core.js:28156)
at Object.updateDirectives (loader.component.html:2)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:28145)
at checkNoChangesView ("
please help me to solve it.it's my big problem :-( 请帮助我解决它。这是我的大问题:-(
I'm not exactly sure where the 'ngIf' statement is being used, but an alternative might be instead to use css to hide the loader when not in use. 我不确定在哪里使用'ngIf'语句,但是另一种选择可能是在不使用时使用CSS隐藏加载程序。 Eg
例如
<div #myLoader [style.display]="isLoading ? 'block' : 'none'>...
为了避免这种情况,请为您的isLoading属性设置默认值(例如,false),然后等待ngOnInit或ngAfterViewInit更改组件中的属性。
Tried to replicate your code in a standalone stackblitz instance https://stackblitz.com/edit/angular-multisub with multiple subscriptions for loaderService
. 试图复制你的代码在一个独立的stackblitz实例https://stackblitz.com/edit/angular-multisub利用多个预订的
loaderService
。
Works without any problem. 可以正常工作。
Could you fork the above instance and modify to reproduce the same. 您能否分叉上述实例并进行修改以重现该实例。
I was changing "behavior subject" to observable. 我正在将“行为主题”更改为可观察的。 subscribe data in loading page and used angular change detector in life cycle.Now, the problem is solve and work correctly
在加载页面中订阅数据并在生命周期中使用了角度变化检测器。现在,问题已解决并且可以正常工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.