ngIfのAngular4の問題

debugcn 投稿 Dev

リヤ

コンポーネントテンプレートに検索アイコンと検索バーがあります。以下は、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クラスのスパンをクリックすると、検索入力テキストが完全に消えます。検索アイコンをクリックしても。デバッグして、ブール値が変化することを確認してみました。ただし、ビューには入力テキストボックスは表示されません。また、detectchangesを試しました。何が間違っている可能性がありますか？

リヤ

一緒に働いた [ngClass]="{'active': !showSearchBar}"

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]