Angular 2+中的ngShow和ngHide等效于什么？

本文翻译自：What is the equivalent of ngShow and ngHide in Angular 2+?

I have a number of elements that I want to be visible under certain conditions. 在某些条件下，我希望看到一些元素。

In AngularJS I would write 在AngularJS中，我会写

<div ng-show="myVar">stuff</div>

How can I do this in Angular 2+? 如何在Angular 2+中做到这一点？

---

#1楼

参考：https://stackoom.com/question/2PHU3/Angular-中的ngShow和ngHide等效于什么

---

#2楼

Just bind to the hidden property 只需绑定到hidden属性

[hidden]="!myVar"

See also 也可以看看

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/hidden

issues 问题

hidden has some issues though because it can conflict with CSS for the display property. hidden有一些问题，因为它可能与display属性的CSS冲突。

See how some in Plunker example doesn't get hidden because it has a style 看看在Plunker示例中如何隐藏some样式，因为它具有样式

:host {display: block;}

set. 组。 (This might behave differently in other browsers - I tested with Chrome 50) （这在其他浏览器中可能会有所不同-我在Chrome 50上进行了测试）

workaround 解决方法

You can fix it by adding 您可以通过添加来修复它

[hidden] { display: none !important;}

To a global style in index.html . 为index.html的全局样式。

another pitfall 另一个陷阱

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

are the same as 与...相同

hidden="true"

and will not show the element. 并且不会显示该元素。

hidden="false" will assign the string "false" which is considered truthy. hidden="false"将分配被认为是真实的字符串"false" 。
Only the value false or removing the attribute will actually make the element visible. 实际上，只有值false或删除属性才会使该元素可见。

Using {{}} also converts the expression to a string and won't work as expected. 使用{{}}还会将表达式转换为字符串，将无法正常工作。

Only binding with [] will work as expected because this false is assigned as false instead of "false" . 只有与[]绑定才能按预期工作，因为此false被分配为false而不是"false" 。

*ngIf vs [hidden] *ngIf与[hidden]

*ngIf effectively removes its content from the DOM while [hidden] modifies the display property and only instructs the browser to not show the content but the DOM still contains it. *ngIf有效地从DOM中删除了它的内容，而[hidden]修改了display属性，仅指示浏览器不显示内容，但DOM仍然包含它。

---

#3楼

Use the [hidden] attribute: 使用[hidden]属性：

[hidden]="!myVar"

Or you can use *ngIf 或者您可以使用*ngIf

*ngIf="myVar"

These are two ways to show/hide an element. 这是显示/隐藏元素的两种方法。 The only difference is: *ngIf will remove the element from DOM while [hidden] will tell the browser to show/hide an element using CSS display property by keeping the element in DOM. 唯一的区别是： *ngIf将从DOM中删除该元素，而[hidden]则告诉浏览器通过将元素保留在DOM中来使用CSS display属性来显示/隐藏该元素。

---

#4楼

If your case is that the style is display none you can also use the ngStyle directive and modify the display directly, I did that for a bootstrap DropDown the UL on it is set to display none. 如果您的情况是样式不显示，您还可以使用ngStyle指令并直接修改显示，我这样做是为了将Bootdrop DropDown上的UL设置为不显示。

So I created a click event for "manually" toggling the UL to display 因此，我创建了一个点击事件，用于“手动”切换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>    

Then on the component I have showDropDown:bool attribute that I toggle every time, and based on int, set the displayDDL for the style as follows 然后在组件上，我具有showDropDown：bool属性，该属性每次都切换，并基于int，为样式设置displayDDL，如下所示

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

---

#5楼

Use hidden like you bind any model with control and specify css for it: 使用hidden就像您将任何模型与控件绑定并为其指定css一样：

HTML: HTML：

<input type="button" class="view form-control" value="View" [hidden]="true" />

CSS: CSS：

[hidden] {
   display: none;
}

---

#6楼

<div [hidden]="myExpression">

myExpression可以设置为true或false