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

在Angular 2+中ng-hide无法正常工作，您可以使用* ngIf指令来隐藏和显示元素。

示例

TS-

    isLoading = true // change value as per your requirement

HTML-

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

希望这会有所帮助！

Answer 2

如果我们假设您使用的是Angular2 +，而不是AngularJS： ng-hide 是Angularjs指令，您不能在Angular2 +中使用它。如果希望您的DOM元素是否真正被渲染，可以使用 * ngIf ，当您希望自己的DOM元素使用 [hidden] 时，可以使用 [hidden] 要呈现但不显示的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>

我在角度中使用ng-hide，但无法正常工作

2 个答案: