“检查后表达式已更改”的控制台错误答案

【问题标题】：console error for "Expression has changed after it was checked"“检查后表达式已更改”的控制台错误
【发布时间】：2020-01-28 07:21:50
【问题描述】：

我的父组件中有一个 div，它使用 [ngClass] 根据某些条件应用不同的 css 类，并根据子组件的输出装饰器检查该条件的值，我面临以下控制台错误：

我的父组件html div:-

 <div [ngClass]="{'alerton1': isAlertClass1 ,'alerton2': isAlertClass2,'alerton3': isAlertClass3,'alerton4': isAlertClass4,
        'alerton5': isAlertClass5,'alerton6': isAlertClass6 ,'alerton7': isAlertClass7, 'alertoff': isAlertClass}">

 <!-- top navbar-->
 <app-header class="topnavbar-wrapper"(activityData)="GetActivityDetail($event)"></app-header>

我的父组件Ts代码：-

GetActivityDetail(classname) {
        switch (classname) {
            case '1': {
                this.isAlertClass1 = true;
                this.isAlertClass2 = false;
                this.isAlertClass3 = false;
                this.isAlertClass4 = false;
                this.isAlertClass5 = false;
                this.isAlertClass6 = false;
                this.isAlertClass7 = false;
                this.isAlertClass = false;
                break;
            }
            case '2': {
                this.isAlertClass1 = false;
                this.isAlertClass2 = true;
                this.isAlertClass3 = false;
                this.isAlertClass4 = false;
                this.isAlertClass5 = false;
                this.isAlertClass6 = false;
                this.isAlertClass7 = false;
                this.isAlertClass = false;
                break;
            }
           default: {
                this.isAlertClass = true;
                this.isAlertClass1 = false;
                this.isAlertClass2 = false;
                this.isAlertClass3 = false;
                this.isAlertClass4 = false;
                this.isAlertClass5 = false;
                this.isAlertClass6 = false;
                this.isAlertClass7 = false;
                break;
            }
}

我的子组件条件码：-

switch (i) {
            case 1: {
                this.activityData.emit('1');
                break;
            }
            case 2: {
                this.activityData.emit('2');
                break;
            }
     default: {
                this.activityData.emit('0');
                break;
            }
}

【问题讨论】：

标签： javascript angular7

【解决方案1】：

你可以使用 ChangeDetectorRef 基类

它提供变更检测功能。更改检测树收集要检查更改的所有视图。使用这些方法从树中添加和删除视图，启动更改检测，并将视图显式标记为脏，这意味着它们已更改并需要重新渲染。

import { ChangeDetectorRef } from '@angular/core';

constructor(protected cdr: ChangeDetectorRef) {}

ngOnInit() {
   this.cdr.detectChanges();
}

【讨论】：