自定义 Pipe 在运行单元测试时导致 ExpressionChangedAfterItHasBeenCheckedError

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