javascript - Angular 5 ngHide ngShow [隐藏] 不工作

Question

大家好!

我正在尝试让我的 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 相关的内容。

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