在加载组件中检查后表达式已更改答案

【问题标题】：expression has changed after it was checked in loading component在加载组件中检查后表达式已更改
【发布时间】：2019-09-01 08:42:51
【问题描述】：

我在角度上有重复的问题，但我已经搜索了很多关于这个问题的内容，并使用了在 stackoverflow 中回答的所有技术...... .

当我订阅多个时，我的问题出在我的加载器组件中。

这是我的加载器组件

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



}

这是我的服务加载器组件


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



}

这是我的拦截器加载器


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

我的错误信息是 "

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

请帮我解决它。这是我的大问题:-(

【问题讨论】：

可以添加模板吗？

标签： javascript angular typescript rxjs angular-cli

【解决方案1】：

我不完全确定“ngIf”语句的使用位置，但另一种方法可能是在不使用时使用 css 来隐藏加载器。例如

  <div #myLoader [style.display]="isLoading ? 'block' : 'none'>...

【讨论】：

【解决方案2】：

为避免它为您的 isLoading 属性设置默认值（例如 false），并等待 ngOnInit 或 ngAfterViewInit 更改组件中的属性。

【讨论】：

【解决方案3】：

尝试在独立的 stackblitz 实例 https://stackblitz.com/edit/angular-multisub 中复制您的代码，并为 loaderService 提供多个订阅。

没有任何问题。

您能否 fork 上述实例并修改以重现相同的内容。

【讨论】：

【解决方案4】：

我正在将“行为主题”更改为可观察的。在加载页面订阅数据并在生命周期中使用角度变化检测器。现在，问题已解决并正常工作

【讨论】：