Karma测试Angular组件报ExpressionChangedAfterItHasBeenCheckedError错误

ExpressionChangedAfterItHasBeenCheckedError是Angular开发模式下的变更检测校验报错，触发逻辑是：单轮变更检测完成后，Angular会二次校验所有绑定的模板值，如果发现值和第一次检测时不一致就会抛出错误。
你的场景里报错是两个因素叠加导致的：

• 你在payment$ Observable的map操作符里写了副作用：直接修改组件类属性isBranded
• 单元测试里Mock的ActivatedRoute.paramMap、支付状态查询接口返回的都是同步Observable，fixture.detectChanges()触发第一轮变更检测时，async管道会同步订阅流、立即执行流逻辑把isBranded从初始值false改为true，第二轮校验时检测到值变化就直接抛错。

本地用Angular CLI启动时不报错，是因为真实场景下接口请求是异步的，赋值时机错开了首轮变更检测周期，且生产环境默认关闭这层二次校验，所以不会触发报错。

不要在Observable管道里写修改类属性的副作用，isBranded本身就是支付状态接口返回的字段，直接从async管道订阅得到的模板变量里取值即可，完全不需要单独维护类属性。

1. 精简组件类代码，删除多余的isBranded属性和管道内的赋值逻辑：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { DigitalPaymentService } from './digital-payment.service';
import { environment } from 'src/environments/environment';

@Component({
    selector: 'app-digital-payment',
    templateUrl: './digital-payment.component.html',
    styleUrls: ['./digital-payment.component.scss']
})
export class DigitalPaymentComponent implements OnInit {
    cdnUrl = environment.cdnUrl;
    payment$: Observable<any>;

    constructor(
        private service: DigitalPaymentService, 
        private activeRoute: ActivatedRoute
    ) {}

    ngOnInit() {
        this.payment$ = this.activeRoute.paramMap.pipe(
            switchMap((params: ParamMap) => {
                const guid = params.get('guid');
                return this.service.checkPaymentStatus(guid);
            })
        );
    }
}

2. 调整模板结构，整页只订阅一次payment$流，直接从模板变量payment上取isBranded控制logo展示，既避免重复订阅的性能损耗，也从根源消除副作用导致的变更检测问题：

<ng-container *ngIf="payment$ | async as payment; else loading">
    <header>
        <a class="logo">
            <img src="{{ cdnUrl }}/Image/not-branded-logo.svg" alt="Not Branded Logo" />
        </a>
        <a class="logo pull-right text-right" *ngIf="payment.isBranded">
            <img src="{{ cdnUrl }}/Image/branded-logo.svg" alt="Branded Logo" />
        </a>
    </header>

    <section>
        <div class="payment-status {{ payment.class }}">
            <mat-icon *ngIf="payment.icon">{{ payment.icon }}</mat-icon>
            <h1>{{ payment.heading }}</h1>
            <p>{{ payment.text }}</p>
        </div>
    </section>
</ng-container>

<ng-template #loading>
    <header>
        <a class="logo">
            <img src="{{ cdnUrl }}/Image/not-branded-logo.svg" alt="Not Branded Logo" />
        </a>
    </header>
    <section>
        <h1 class="loading-heading">Loading</h1>
        <p>Please wait until your request has been executed.</p>
    </section>
</ng-template>

如果暂时不想调整模板结构，可以通过两种方式绕过校验，本质都是把值修改的时机错开单轮变更检测周期：

• 方式1：注入ChangeDetectorRef，赋值后手动触发变更检测

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

constructor(
    private service: DigitalPaymentService, 
    private activeRoute: ActivatedRoute,
    private cdr: ChangeDetectorRef
) {}

ngOnInit() {
    this.payment$ = this.activeRoute.paramMap.pipe(switchMap((params: any) => {
        const guid = params.get('guid');
        return this.service.checkPaymentStatus(guid).pipe(map((data: any) => {
            this.isBranded = data.isBranded;
            this.cdr.detectChanges(); // 手动触发检测同步值
            return data;
        }));
    }));
}

• 方式2：把赋值逻辑放到异步队列里执行

return this.service.checkPaymentStatus(guid).pipe(map((data: any) => {
    setTimeout(() => {
        this.isBranded = data.isBranded;
    });
    return data;
}));

这类方案没有解决流内写副作用的根本问题，长期维护容易引发其他变更检测异常，仅适合临时兼容使用。

你当前单元测试里Mock的checkPaymentStatus返回值结构不全，需要补全服务层定义的class、icon、heading、text字段，避免模板渲染时找不到对应属性报错，调整后测试即可正常运行，不会再抛出变更检测相关错误。

内容的提问来源于stack exchange，提问作者Hristo Dobrev