Class的ExpressionChangedAfterItHa

Class的ExpressionChangedAfterItHa

本文介绍了ngClass的ExpressionChangedAfterItHasBeenCheckedError的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个锚标签

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

  }

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

When I click on anchor tag it throws an error

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

It was working,but due to update any module by a team member it stopped working,

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

I have googled a lot but could not get it working

请帮助

谢谢

推荐答案

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

To add to Ritesh's answer, in this case you can do two things :

  • setTimeout()回调中包装导致此消息的代码
  • 告诉Angular进行另一个这样的检测循环:
  • wrap the code that causes this message in a setTimeout() callback
  • Tell Angular to make another detection loops like this :

-

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

我还想提出一篇有趣的文章,解释在幕后发生的事情:您需要了解的所有关于ExpressionChangedAfterItHasBeenCheckedError的信息

I would also like to suggest an interesting article that explains what happens under the hood: Everything you need to know about ExpressionChangedAfterItHasBeenCheckedError

这篇关于ngClass的ExpressionChangedAfterItHasBeenCheckedError的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 01:33