ngClass的ExpressionChangedAfterItHasBeenCheckedError

Question

我有两个锚标签

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

  }

当我点击锚标记时，它会引发错误

  

ExpressionChangedAfterItHaHasBeenCheckedError

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

我在Google上搜索了很多，但无法正常运行

请帮助

谢谢

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

我还想提出一篇有趣的文章，解释在幕后发生的事情  ：Everything you need to know about ExpressionChangedAfterItHasBeenCheckedError

Answer 2

像这样修改您的方法：

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

基本上，当运行更改检测并在其后修改表达式值时，发生ExpressionChangedAfterItHasBeenCheckedError。