ExpressionChangedAfterItHasBeenCheckedError with ngClass

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

  }

Когда я нажимаю на тег привязки, он выдает ошибку

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

Я также хотел бы предложить интересную статью, которая объясняет, что происходит под капотом: все, что вам нужно знать о 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 происходит, когда обнаружение изменений уже выполнено, и после этого значение выражения изменяется.