Angular2中的ngShow和ngHide相当于什么？
我有一些要在某些条件下可见的元素。
在AngularJS我会写
<div ng-show="myVar">stuff</div> 我如何在Angular 2中做到这一点？
只要绑定到hidden属性
[hidden]="!myVar"
也可以看看
问题
hidden有一些问题，但因为它可以与CSS的display属性冲突。
看看Plunker示例中的some 示例如何隐藏，因为它具有样式
:host {display: block;}
组。 （在其他浏览器中，这可能会有所不同 – 我使用Chrome 50进行testing）
解决方法
你可以通过添加来修复它
[hidden] { display: none !important;}
以index.html的全局风格。
另一个陷阱
hidden="false" hidden="{{false}}" hidden="{{isHidden}}" // isHidden = false;
是一样的
hidden="true"
并不会显示该元素。
hidden="false"会分配被认为是真的string"false" 。
只有值为false或删除属性实际上会使元素可见。
使用{{}}也会将expression式转换为string，并且无法按预期工作。
只有与[]绑定将按预期方式工作，因为这个false被分配为false而不是"false" 。
*ngIf vs [hidden]
*ngIf [hidden]修改display属性，并且只指示浏览器不显示内容，但DOM仍然包含内容，则有效地从DOM中删除其内容。
*ngIf="myVar"
要么
[hidden]="!myVar"
这是显示/隐藏元素的两种方法。 *ngIf和[hidden]之间的唯一区别是： *ngIf将添加或完全从DOM中删除元素，但是[hidden]浏览器将使用CSS的display属性来显示/隐藏元素，它将保留在DOM中。
对不起，我不同意使用Angular 2时被认为是不安全的隐藏的绑定。这是因为隐藏的样式可以很容易地覆盖，例如使用
display: flex;
推荐的方法是使用* ngIf更安全。 有关更多详细信息，请参阅官方的Angular博客。 5个新秀的错误，以避免angular2
<div *ngIf="showGreeting"> Hello, there! </div>
我发现自己在不同的情况下，比在我的情况下，元素是一个flex容器。如果不是你的情况一个简单的工作可能是
[style.display]="!isLoading ? 'block' : 'none'"
在我的情况下，由于我们支持的许多浏览器仍然需要供应商前缀，以避免问题，我去了另一个简单的解决scheme
[class.is-loading]="isLoading"
那么CSS在哪里很简单
&.is-loading { display: none }
离开，然后显示默认类处理的状态。
如果你的情况是样式显示没有，你也可以使用ngStyle指令，并直接修改显示，我做了一个引导DropDown UL上它被设置为显示无。
所以我创build了一个“手动”切换UL显示的点击事件
<div class="dropdown"> <button class="btn btn-default" (click)="manualtoggle()" id="dropdownMenu1" > Seleccione una Ubicación <span class="caret"></span> </button> <ul class="dropdown-menu" [ngStyle]="{display:displayddl}"> <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li> </ul> </div>
然后在组件上，我showDropDown：布尔属性，我每次切换，并根据int，设置displayDDL为样式如下
showDropDown:boolean; displayddl:string; manualtoggle(){ this.showDropDown = !this.showDropDown; this.displayddl = this.showDropDown ? "inline" : "none"; }
根据ngShow和ngHide的 Angular 1文档，这两个指令都添加了CSS样式display: none !important; ，根据该指令的条件（对于ngShow将该CSS添加到false值，并为ngHide添加该CSS为真值）元素。
我们可以使用Angular 2的指令ngClass来实现这个行为：
/* style.css */ .hide { display: none !important; } <!-- old angular1 ngShow --> <div ng-show="ngShowVal"> I'm Angular1 ngShow... </div> <!-- become new angular2 ngClass --> <div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div> <!-- old angular2 ngHide --> <div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div> <!-- become new angular2 ngClass --> <div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>
请注意，对于Angular2中的show行为，我们需要添加! （不）之前的ngShowVal，并hide在Angular2中的行为，我们不需要添加! （不）在ngHideVal之前。
使用隐藏像你绑定任何模型与控制，并指定它的CSS ：
HTML：
<input type="button" class="view form-control" value="View" [hidden]="true" />
CSS：
[hidden] { display: none; }
<div hidden="{{ myExpression }}"> <div [hidden]="myExpression">
myExpression可能设置为true或false
如果你使用Bootstrap就像这样简单：
<div [class.hidden]="myBooleanValue"></div>
