angular - ExpressionChangedAfterItHasBeenCheckedError 与 ngClass

Question

我有两个 anchor 标签

 <ul class="switchNav">
          <li [ngClass]="!hidePanel2 ? 'active' : ''">
            <a href="javascript:void(0)" (click) ="hideShowPanel(1)">panel 1</a>
          </li>
          <li [ngClass]="!hidePanel1? 'active' : ''">
            <a href="javascript:void(0)" (click) ="hideShowPanel(2)">panel 2</a>
          </li>
        </ul>

.ts

hidePanel2: boolean  = true;
 hidePanel1: boolean  = false;

 hideShowPanel(check: number) {
    if (check == 1) {
      this.hidePanel2 = true;
      this.hidePanel1 = false;
    }
    else {
      this.hidePanel1 = false;
      this.hidePanel2 = true;
    }

  }

当我点击 anchor 标签时它抛出一个错误

ExpressionChangedAfterItHasBeenCheckedError

它工作正常，但由于团队成员更新了任何模块，它停止工作了，

我在谷歌上搜索了很多，但无法正常工作

请帮忙

谢谢

Answer 1

要添加到 Ritesh 的答案中，在这种情况下你可以做两件事:

• 将导致此消息的代码包装在 setTimeout() 回调中
• 告诉 Angular 像这样进行另一个检测循环:

--

 constructor(private changeDetector: ChangeDetectorRef) {
 }

 hideShowPanel(check: number) {
 
    if (check == 1) {
        this.hidePanel2 = true;
        this.hidePanel1 = false;
    }
    else {
        this.hidePanel1 = false;
        this.hidePanel2 = true;
    }
    this.changeDetector.detectChanges();
}

我还想推荐一篇有趣的文章，解释幕后发生的事情: Everything you need to know about ExpressionChangedAfterItHasBeenCheckedError