Question

美好的一天，伙计们！

我正在尝试让我的Angular 5 app隐藏元素（或显示隐藏）。但是，这似乎不起作用。

我尝试过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

你的[隐藏]会起作用，但你需要检查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'">

如果你想从DOM中删除它

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

Answer 3

您应该始终尝试使用*ngIf代替[hidden]。

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

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

Answer 4

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

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

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

[hidden] {
    display: none !important;
}

Answer 5

试试这个

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

Answer 6

试试这个：

notificationBtn

<强> component.ts：

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

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

Answer 7

如果不能使用* ngif，则[class.hide]可以使用角度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>

Answer 8

您可以使用 [style.visibility]="isHidden ? 'hidden': 'visible'"。这将隐藏您的元素，但它仍会在 DOM 中占用相同的空间并影响页面布局。
另一种选择是在模板中使用 [hidden]="condition"。这将向元素添加 [hidden] 属性。仅当您的 css 中没有明确设置 display: hidden 属性时，浏览器才会将 display 应用于此元素（对于此元素，通过 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;
    }

Answer 9

隐藏元素有两种方法

使用＆＃34;隐藏＆＃34; html属性但是在角度你可以用一个或多个字段绑定它：

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

2.更好的方法是使用＆＃34; * ngIf＆＃34;像这样的指令：

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

现在为什么这是一种更好的方法，因为它不会隐藏元素，它会从html代码中删除它，这样可以帮助你的页面呈现。

Angular 5 ngHide ngShow [隐藏]无法正常工作

9 个答案: