运行单元测试时，自定义管道会导致ExpressionChangedAfterIt HasBeenCheckedError

Question

在我的模板中，我有这个：

...
<tbody>
<ng-container *ngFor="let item of items">
<tr *ngIf="item.isBoolean">
<td><a href="#">{{item.description}}</a></td>
<td>{{item | customPipe}}</td>
</tr>
</ng-container>
</tbody>
...

这是我的单元测试：

it('should behave...', () => {
const trs: DebugElement[] = fixture.debugElement.queryAll(By.css('tbody tr'));
expect(trs.length).toBeGreaterThan(0);
});

当我执行测试时，我得到以下内容：

Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'value'. Current value: 'undefined'.. Find more at https://angular.io/errors/NG0100
error properties: Object({ code: '100' })
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'value'. Current value: 'undefined'.. Find more at https://angular.io/errors/NG0100
at throwErrorIfNoChangesMode (node_modules/@angular/core/fesm2015/core.js:6723:1)
at bindingUpdated (node_modules/@angular/core/fesm2015/core.js:12854:1

value就是customPipe返回的内容。

Answer 1

我今天在通过Jasmine测试Angular应用程序时遇到了这个问题。请检查下面的代码片段，它解决了我的问题(提供：https://www.codegrepper.com)。

import { ChangeDetectorRef, AfterContentChecked } from '@angular/core';
constructor(private ref: ChangeDetectorRef){}
ngAfterContentChecked() {
this.ref.detectChanges();
}