Angular 4 ngIf 问题

Question

我在组件模板中有一个搜索图标和一个搜索栏。以下是 HTML 代码片段：

<div class="fixed-action-btn horizontal click-to-toggle search" id="search">
  <span class="menu-label"></span>
  <a class="btn-floating btn-large" (click)="toggleSearchBar()">
    <i class="large material-icons">search</i>
  </a>
  <ul *ngIf="showSearchBar">
    <li class="waves-effect waves-light" id="search_form">
      <form>
        <div class="input-field">
          <input id="search" name='filter'type="search">
          <label class="label-icon" for="search">
            <i class="material-icons">search</i>
          </label>
          <span class="close_btn" (click)="toggleSearchBar()">
            <i class="material-icons">close</i>
          </span>
        </div>
      </form>
    </li>
  </ul>
</div>

在组件中，我有一个函数可以切换变量：

  toggleSearchBar() {
    this.showSearchBar = !this.showSearchBar;
  }

问题：单击带有 close_btn class 的跨度时，搜索输入文本完全消失。即使我点击搜索图标。我尝试调试并检查布尔值是否发生了变化。但是在视图中没有出现输入文本框。也尝试过检测变化。可能有什么问题？

Answer 1

合作过 [ngClass]="{'active': !showSearchBar}"

Angular 4 ngIf 问题

Angular 4 Issue with ngIf

html

onclick

materialize

angular

angular4-forms