我在角度使用 ng-hide 但它不起作用答案

【问题标题】：I am using ng-hide in angular but it's not working我在角度使用 ng-hide 但它不起作用
【发布时间】：2019-08-07 05:42:21
【问题描述】：

<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>

【问题讨论】：

请发布代码、当前错误/输出和预期输出。
你能把你的代码放在 HTML sn-p 中吗？请务必包含 angular.js。有很多版本可供选择，尽量匹配你正在使用的版本。如果您也可以链接它，它可能还需要关联的 CSS 文件。

标签： angularjs typescript

【解决方案1】：

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

例子

TS -

    isLoading = true // change value as per your requirement

HTML -

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

如果我们假设您使用的是 Angular2+ 而不是 AngularJS： ng-hide 是 Angularjs 指令，你不能在 Angular2+ 中使用它。你可以使用 *ngIf 如果你想要你的 DOM 元素被实际渲染，当你想要你的要渲染但不显示的 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>

【讨论】：