Angular 5 ngHide ngShow [隐藏] 不工作答案

【问题标题】：Angular 5 ngHide ngShow [hidden] not workingAngular 5 ngHide ngShow [隐藏] 不工作
【发布时间】：2018-09-15 02:47:23
【问题描述】：

大家好！

我正在尝试让我的 Angular 5 应用程序隐藏元素（或显示隐藏）。但是，这似乎行不通。

我已经尝试过 ngHide、ng-hide、ngShow、ng-show、[hidden] 方法 - 它们都不起作用。

我的 login.component.ts 看起来像这样：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
  isHidden: boolean = true;
  input_pw: string = 'password';

  constructor() { }

  ngOnInit() {
    console.log(this.isHidden); //console shows true
  }

}

还有login.component.html：

<div class="container">

  <div class="cont-login">
    <div class="login-pane">

      <div>
        <p class="inner log-labels">Your password</p>
        <input class="txt" type="password" [(ngModel)]="input_pw" ngHide="isHidden">
      </div>

      <div>
        <input class="btn" type="submit" value="Login">
      </div>

    </div>


  </div>

</div>

我在这里做错了吗？

注意：我没有更改或添加任何与 css 相关的内容。

【问题讨论】：

如果你像你说的那样使用angular 5，你需要的属性是[hidden]="isHidden"

标签： javascript angular

【解决方案1】：

如果您只想切换可见性并仍将输入保留在 DOM 中：

<input class="txt" type="password" [(ngModel)]="input_pw" 
 [style.visibility]="isHidden? 'hidden': 'visible'">

另一种方法是根据rrd的回答，即使用HTML隐藏属性。在 HTML 元素中，如果 hidden 属性设置为 true 浏览器应该隐藏该元素不显示，但问题是如果元素具有显式提及的 display 样式，则此行为会被覆盖。

.hasDisplay {
  display: block;
}

<input class="hasDisplay" hidden value="shown" />
<input hidden value="not shown">

要克服这个问题，您可以选择为 [hidden] 使用覆盖显示的显式 css；

[hidden] {
  display: none !important;
}

另一种方法是创建一个is-hidden 类并执行以下操作：

<input [class.is-hidden]="isHidden"/>

.is-hidden {
      display: none;
 }

如果您使用display: none，该元素将从静态流中跳过并且不会为该元素分配空间，如果您使用visibility: hidden，它将包含在流中并分配一个空间但它将是空白。

重要的是在整个应用程序中使用一种方式，而不是混合不同的方式，从而降低代码的可维护性。

如果你想从 DOM 中移除它

<input class="txt" type="password" [(ngModel)]="input_pw" *ngIf="!isHidden">

【讨论】：

这是完成 OPs 问题的最佳方式，跨浏览器。
绝对应该是公认的答案。根据用例场景，使用 ngIf 并不比隐藏更可取。
[style.display]="isHidden? 'none': 'block'" - 这很好用 - ngIf 根本不工作 - 谢谢！
@SliverNinja-MSFT 我已经更新了答案以进一步解释事情，因为我看到更多人感兴趣。

【解决方案2】：

您的 [hidden] 可以使用，但您需要检查 css：

<input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden" />

还有css：

[hidden] {
  display: none !important;
}

这应该可以如你所愿。

【讨论】：

你不应该需要检查 css，因为它应该只使用 [hidden]="isHidden"
在没有 CSS 的情况下为我工作。如果您确实希望元素保留在 DOM 中但不被看到，这似乎是最佳答案。
@mast3rd3mon 它对我有用。为什么这行得通？默认的 [隐藏] 行为如何无法正常工作。
@WilliamHampshire 您是否将其设置为变量？ [hidden]="isHidden"?如果是这样，您是否将等效的 isHidden 设置为 true 值？
这对我有用，谢谢，重要的是要知道组件中设置的样式要隐藏！

【解决方案3】：

2019 年更新：我意识到这有点糟糕。正如第一条评论所述，这在很大程度上取决于具体情况，使用 [hidden] 属性不是不好的做法：请参阅 cmets 了解您需要使用它的一些情况和不是*ngIf

原答案：

您应该始终尝试使用*ngIf 而不是[hidden]。

 <input *ngIf="!isHidden" class="txt" type="password" [(ngModel)]="input_pw" >

有几个blog posts about 的主题，但底线是，隐藏通常意味着您不希望浏览器渲染对象 - 使用 angular 您仍然会浪费资源来渲染它，它最终会出现在DOM 无论如何（棘手的用户可以通过基本的浏览器操作看到它）。

【讨论】：

视情况而定。使用 *ngIf，您实际上可以在 DOM 中添加或删除元素，这比隐藏或显示元素要多得多。
请问，为什么在这种情况下，ngShow 和 ngHide 不起作用？或者这是角度本身的问题？
ngShow 和 ngHide 是 AngularJS sytnax，与 Angular2+ 完全不同
派对迟到了，但在某些情况下需要隐藏一些东西。例如，对于材料，如果您使用 *ngIf 来切换您是否在屏幕上看到它，那么 mat-table 分页将不起作用。
为了支持其他 cmets：有一些用例需要隐藏，并且优先于 ngIf - “应该始终使用 ngIf”是不准确的，实际上取决于场景。

【解决方案4】：

如果你不能使用 *ngif，[class.hide] 在 angular 7 中工作。示例：

<mat-select (selectionChange)="changeFilter($event.value)" multiple [(ngModel)]="selected">
          <mat-option *ngFor="let filter of gridOptions.columnDefs"
                      [class.hide]="filter.headerName=='Action'"  [value]="filter.field">{{filter.headerName}}</mat-option>
        </mat-select>

【讨论】：

【解决方案5】：

如果将 [hidden]="true" 添加到 div，实际发生的事情是使用 display: none 有条件地向此元素添加一个类 [hidden]

请检查浏览器中元素的样式，以确保没有其他样式影响元素的 display 属性，如下所示：

如果您发现 [hidden] 类的 display 被覆盖，则需要将此 css 代码添加到您的样式中：

[hidden] {
    display: none !important;
}

【讨论】：

解决了我的问题。我的 DIV 的 css 有“display: flex”，然后我设置 [hidden]="someCondition"，没有意识到显示被隐藏了。我把它分成 2 个 DIV，它起作用了。

【解决方案6】：

试试这个

 <input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden">

【讨论】：

试过了 - 仍然没有。 :(

【解决方案7】：

试试这个：

<button (click)="click()">Click me</button>

<input class="txt" type="password" [(ngModel)]="input_pw" [ngClass]="{'hidden': isHidden}" />

component.ts：

isHidden: boolean = false;
click(){
    this.isHidden = !this.isHidden;
}

【讨论】：

【解决方案8】：

隐藏元素有两种方式

使用“隐藏”的 html 属性但在 Angular 中，您可以将其与一个或多个字段绑定，如下所示：

<input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden">

2.更好的方法是像这样使用“*ngIf”指令：

<input class="txt" type="password" [(ngModel)]="input_pw" *ngIf="!isHidden">

现在为什么这是一个更好的方法，因为它不只是隐藏元素，它会从 html 代码中删除它，因此这将有助于您的页面呈现。

【讨论】：

示例编号 2 与 1 相同。指令 ngIf 不好，因为从 DOM 中删除输入。
@bluray 已编辑。为什么你认为它不应该从 DOM 中删除它？
视情况而定。例如，如果您使用它 @ViewChild 并且它将从 DOM 中删除，则 viewchild 将是未定义的。这将是一个问题。而且，DOM 操作非常昂贵。

【解决方案9】：

您可以使用[style.visibility]="isHidden ? 'hidden': 'visible'"。这将隐藏您的元素，但仍会在 DOM 中占用相同的空间并影响页面布局。
另一个选项是在您的模板中使用[hidden]="condition"。这将为元素添加[hidden] 属性。仅当您的 css 中没有明确设置 display 属性时，浏览器才会将 display: hidden 应用于此元素（对于此元素，通过 id、元素的类或元素的标签等）。否则，您应该设置[hidden] { display: none !important; }。这将完全隐藏不再占用布局空间的元素。
您还可以有条件地在元素[class.is-hidden]="condition" 上设置类，然后在.is-hidden 类中的css 中，您可以使用任何您想要的css 规则： .is-hidden { display: none; } 要么 .is-hidden { visibility: hidden; } 或可访问且布局友好的替代 display: none（屏幕阅读器无法读取）和 visibility: hidden（占用 DOM 中的物理空间）（来源 https://github.com/30-seconds/30-seconds-of-css/blob/master/snippets/offscreen.md）：

    .is-hidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

【讨论】：