Я использую нг-скрыть в угловых, но это не работает

Question

<nav class="menu-nav">
        <ul>
          <li class="menu-li" ng-model="myVar"><a>Search<i class="fa fa-chevron-down pull-right"></i></a>
          <div class="sub-menu" ng-hide="myVar">
            <ul>
              <li><a>Search-sub</a></li>
              <li><a>Search-sub</a></li>
              <li><a>Search-sub</a></li>
              <li><a>Search-sub</a></li>
            </ul>
          </div>
          </li>
          <li class="menu-li"><a>Home<i class="fa fa-chevron-down pull-right"></i></a></li>
          <li class="menu-li"><a>Dashboard<i class="fa fa-chevron-down pull-right"></i></a></li>
          <li class="menu-li"><a>Register<i class="fa fa-chevron-down pull-right"></i></a></li>
          <li class="menu-li"><a>Login<i class="fa fa-chevron-down pull-right"></i></a></li>
           </ul>
      </nav>

Answer 1

Если мы предполагаем, что вы используете Angular2 +, а не AngularJS: ng-hide является директивой Angularjs, вы не можете использовать ее в Angular2 +.Вы можете использовать * ngIf , если вы хотите, чтобы ваши элементы DOM фактически отображались или нет, и [скрытый] , что эквивалентно ng-show в angularjs, когда вы хотите, чтобы ваш элемент DOMдолжны быть отображены, но не отображены.

В вашем случае вы можете иметь свойство в вашем .ts файле :

 public loading: boolean = false;  // update this property when you have to...

И в вашем .html шаблоне:

<div class="sub-menu" *ngIf="loading">
  <ul>
    <li><a>Search-sub</a></li>
    <li><a>Search-sub</a></li>
    <li><a>Search-sub</a></li>
    <li><a>Search-sub</a></li>
  </ul>
</div>

Answer 2

В Angular 2+ ng-hide не работает, вы можете использовать директиву * ngIf для скрытия и показа элемента.

Пример

TS -

    isLoading = true // change value as per your requirement

HTML -

<div *ngIf="isLoading">Loading... </div>

Надеюсь, это поможет!