Angular 5 ngHide ngShow [隐藏]不起作用

Question

大家好！

我正在尝试使Angular 5应用程序隐藏元素（或显示为隐藏）。但是，这似乎不起作用。

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

我的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相关的内容。

Answer 1

您的[隐藏]可以使用，但是您需要检查CSS：

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

和CSS：

[hidden] {
  display: none !important;
}

那应该工作，如你所愿。

Answer 2

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

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

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

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

.hasDisplay {
  display: block;
}

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

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

Answer 3

2019年更新：我意识到这有点不好建议。如第一条评论所述，这在很大程度上取决于具体情况，并且使用[hidden]属性并不是一种不好的做法：在某些情况下，您需要使用它而不是*ngIf

原始答案：

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

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

有几篇有关该主题的博客文章，但最重要的是，“隐藏”通常意味着您不希望浏览器渲染对象-使用角度，您仍然浪费了渲染资源，并且无论如何它最终都会出现在DOM中（和棘手的用户可以通过基本的浏览器操作来查看它）。

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