Javascript Angular 5 ngHide ngShow [隐藏] 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49669654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 ngHide ngShow [hidden] not working
提问by zilijonas
Good day, guys!
美好的一天，伙计们！
I am trying to make my Angular 5 app hide elements (or show hidden). However, this seems to not work.
我试图让我的 Angular 5 应用程序隐藏元素（或显示隐藏）。但是，这似乎行不通。
I've tried ngHide, ng-hide, ngShow, ng-show, [hidden] methods - none of them works.
我尝试过 ngHide、ng-hide、ngShow、ng-show、[hidden] 方法 - 它们都不起作用。
My login.component.ts looks like this:
我的 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
}
}
And login.component.html:
和 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>
Am I doing something wrong here?
我在这里做错了吗？
NOTE: I did not change or add anything related to css.
注意：我没有更改或添加任何与 css 相关的内容。
采纳答案by ForestG
2019 Update:I realize that this is somewhat bad advice. As the first comment states, this heavily depends on the situation, and it is nota bad practice to use the [hidden] attribute: see the comments for some of the cases where you need to use it and not *ngIf
2019 年更新：我意识到这是一个有点糟糕的建议。正如第一条评论所说，这在很大程度上取决于情况，使用 [hidden] 属性并不是一个坏习惯：请参阅某些需要使用它而不是使用它的情况的评论*ngIf
Original answer:
原答案：
You should always try to use *ngIfinstead of [hidden].
您应该始终尝试使用*ngIf而不是[hidden].
<input *ngIf="!isHidden" class="txt" type="password" [(ngModel)]="input_pw" >
There are several blog posts aboutthat topics, but the bottom line is, that Hidden usually means you do not want the browser to render the object - using angular you still waste resource on rendering it, and it will end up in the DOM anyway (and tricky users can see it with basic browser manipulation).
有几篇关于该主题的博客文章，但最重要的是，隐藏通常意味着您不希望浏览器渲染对象 - 使用 angular 您仍然会浪费资源来渲染它，无论如何它最终会出现在 DOM 中（狡猾的用户可以通过基本的浏览器操作来查看它）。
回答by rrd
Your [hidden] will work but you need to check the css:
您的 [hidden] 将起作用，但您需要检查 css：
<input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden" />
And the css:
和CSS：
[hidden] {
display: none !important;
}
That should work as you want.
这应该可以正常工作。
回答by sabithpocker
If you want to just toggle visibility and still keep the input in DOM:
如果您只想切换可见性并仍将输入保留在 DOM 中：
<input class="txt" type="password" [(ngModel)]="input_pw"
[style.visibility]="isHidden? 'hidden': 'visible'">
The other way around is as per answer by rrd, which is to use HTML hidden attribute. In an HTML element if hiddenattribute is set to truebrowsers are supposed to hide the element from display, but the problem is that this behavior is overridden if the element has an explicit displaystyle mentioned.
另一种方法是根据 rrd 的回答，即使用 HTML 隐藏属性。在 HTML 元素中，如果hidden将属性设置为true浏览器应该隐藏该元素不显示，但问题是如果该元素具有显式display样式，则此行为将被覆盖。
.hasDisplay {
display: block;
}<input class="hasDisplay" hidden value="shown" />
<input hidden value="not shown">To overcome this you can opt to use an explicit css for [hidden]that overrides the display;
为了克服这个问题，您可以选择使用显式 css 来[hidden]覆盖显示；
[hidden] {
display: none !important;
}
Yet another way is to have a is-hiddenclass and do:
另一种方法是is-hidden上课并执行以下操作：
<input [class.is-hidden]="isHidden"/>
.is-hidden {
display: none;
}
If you use display: nonethe element will be skipped from the static flow and no space will be allocated for the element, if you use visibility: hiddenit will be included in the flow and a space will be allocated but it will be blank space.
如果您使用display: none该元素将从静态流中跳过并且不会为该元素分配空间，如果您使用visibility: hidden它将被包含在流中并且将分配一个空间但它将是空白空间。
The important thing is to use one way across an application rather than mixing different ways thereby making the code less maintainable.
重要的是在应用程序中使用一种方式，而不是混合不同的方式，从而降低代码的可维护性。
If you want to remove it from DOM
如果你想从 DOM 中删除它
<input class="txt" type="password" [(ngModel)]="input_pw" *ngIf="!isHidden">
回答by KarlMenino
If you can not use *ngif, [class.hide] works in angular 7. example:
如果您不能使用 *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>
回答by Sajeetharan
Try this
尝试这个
<input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden">
回答by bluray
Try this:
尝试这个：
<button (click)="click()">Click me</button>
<input class="txt" type="password" [(ngModel)]="input_pw" [ngClass]="{'hidden': isHidden}" />
component.ts:
组件.ts：
isHidden: boolean = false;
click(){
this.isHidden = !this.isHidden;
}
回答by aminag
There is two way for hide a element
隐藏元素有两种方式
Use the "hidden" html attribute But in angular you can bind it with one or more fields like this :
<input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden">
使用 "hidden" html 属性 但在 angular 中，您可以将其与一个或多个字段绑定，如下所示：
<input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden">
2.Better way of doing this is to use " *ngIf " directive like this :
2.更好的方法是使用“*ngIf”指令，如下所示：
<input class="txt" type="password" [(ngModel)]="input_pw" *ngIf="!isHidden">
Now why this is a better way because it doesn't just hide the element, it will removes it from the html code so this will help your page to render.
现在为什么这是一个更好的方法，因为它不只是隐藏元素，它会从 html 代码中删除它，这样这将有助于您的页面呈现。
