Примитивная переменная обновляется только один раз в угловом шаблоне

Question

У меня есть меню, которое я открываю при нажатии кнопки, и я хотел бы закрыть при нажатии внутренней кнопки.Когда меню открывается по нажатию внешней кнопки, оно не обновляет переменную в шаблоне, когда я нажимаю внутреннюю кнопку (даже если переменная в контроллере не переключена).

template

<div class="filter" (click)="openMenu()">
  <div class="inner-menu" [ngClass]="{'showMenu': showMenu }" >

  {{showMenu}} <!-- THIS DOES NOT UPDATE AFTER THE 1.TIME-->

   <div class="btn-container">
     <div class="btn tiny primary" (click)="filterData()">
       Close
     </div>
   </div> 

  </div>
 </div>

контроллер

openMenu() {
  this.showMenu = true;
}

filterData() {
  this.showMenu = false;   // The value is updated in the controller
  this.applyFilter.emit(true);  // Correctly propagated to the parent
}

файл scss

filter {
position: relative;

.inner-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  min-width: 25rem;

 btn-container {
   text-align: center;
   margin-top: 1.5rem;
  }
}

 .showMenu {
   display: block;
 }
}

Я уверен, что решение чрезвычайноОчевидно, поскольку я разработал много других приложений, и они всегда работали аналогичным образом, но в настоящий момент я не могу найти реальную причину, по которой переменная не обновляется в шаблоне, а только в контроллере.

Answer 1

Я не использовал event.stopPropagation(); для внутреннего нажатия кнопки.Просто, но иногда не сразу, чтобы найти.

Я исправил мой код следующим образом:

filterData(event: MouseEvent) {
 event.stopPropagation();  // <- This is new
 this.showMenu = false;
 this.applyFilter.emit(this.sections);
}

В шаблоне:

<div class="btn tiny primary" (click)="filterData($event)">
   Close
</div>

И это сработало.Я надеюсь, что это может сэкономить некоторое время кому-то еще!

ОБНОВЛЕНИЕ

Для завершения здесь статья , объясняющая потенциальные опасности при использовании preventDefault(), чтобы вы могли знать о побочных эффектах, если вам придется использовать его в своих приложениях.