在Angular 2+中ngShow和ngHide的等价物是什么？

hidden属性可用于此目的

[hidden]="!myVar"

另见

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

问题

hidden有一些问题，因为它可能与display属性的CSS冲突。

看看Plunker示例中的some如何不被隐藏，因为它有一个样式

:host {display: block;}

设置。（这在其他浏览器中可能会有所不同-我用Chrome50进行了测试）

解决方法

您可以通过添加来修复它

[hidden] { display: none !important;}

index.html中的全局样式。

另一个陷阱

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

与

hidden="true"

并且不会显示元素。

hidden="false"将分配字符串"false"，该字符串被认为是truthy。
只有值false或删除属性才会实际使元素 可见。

使用\{\{}}还会将表达式转换为字符串，并且不会按预期工作。

只有与[]绑定才能按预期工作，因为此false被分配为false而不是"false"。

*ngIf vs[hidden]

*ngIf有效地从DOM中删除了它的内容，而[hidden]修改了display属性，只指示浏览器不显示内容，但DOM仍然包含它。

使用[hidden]属性：

[hidden]="!myVar"

或者您可以使用*ngIf

*ngIf="myVar"

这是显示/隐藏元素的两种方法。唯一的区别是：*ngIf将从DOM中删除元素，而[hidden]将告诉浏览器使用CSSdisplay属性显示/隐藏元素，方法是将元素保留在DOM中。

如果您的情况是样式为显示无，您也可以使用ngStyle指令并直接修改显示，我这样做是为了引导DropDown，其上的UL设置为显示无。

所以我创建了一个点击事件，用于“手动”切换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： bool属性，并基于int，为样式设置displayDDL如下

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

使用隐藏，就像您将任何模型与控件绑定并为其指定css：

超文本标记语言：

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

css：

[hidden] {
display: none;
}

<div [hidden]="myExpression">

可以设置为true或false

对不起，我必须反对绑定到隐藏，这在使用Angular 2时被认为是不安全的。这是因为隐藏样式可以很容易地覆盖，例如使用

display: flex;

推荐的方法是使用*ngIF，这更安全。有关更多详细信息，请参阅官方Angular博客。使用Angular 2要避免的5个新手错误

<div *ngIf="showGreeting">
Hello, there!
</div>

根据ngShow和ngHide的Angular 1留档，这两个指令都根据该指令的条件将css样式display: none !important;添加到元素中（对于ngShow，在false值上添加css，对于ngHide，在true值上添加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 angular1 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之前添加!（not），对于Angular2中的hide行为，我们不要需要在ngHideVal之前添加!（not）。

我发现自己处于相同的情况下，与我的情况不同的是，元素是一个柔性容器。如果不是你的情况，一个简单的解决方法可能是

[style.display]="!isLoading ? 'block' : 'none'"

在我的情况下由于事实上很多浏览器我们支持仍然需要供应商前缀以避免问题我去了另一个简单的解决方案

[class.is-loading]="isLoading"

然后CSS很简单

&.is-loading { display: none }

然后离开由默认类处理的显示状态。

如果你使用的是Bootstrap就像这样简单：

<div [class.hidden]="myBooleanValue"></div>

在bootstrap 4.0中，类“d-没有”=“显示：没有！重要的；”

<div [ngClass]="{'d-none': exp}"> </div>

对于任何遇到这个问题的人来说，这就是我完成它的方式。

import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";


@Directive({
selector: '[hide]'
})
export class HideDirective implements OnChanges {
@Input() hide: boolean;


constructor(private renderer: Renderer2, private elRef: ElementRef) {}


ngOnChanges() {
if (this.hide) {
this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
} else {
this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
}
}
}

我使用'visibility'是因为我想保留元素占用的空间。如果您不想这样做，您可以使用'display'并将其设置为'none'；

您可以动态或不动态地将其绑定到您的html元素。

<span hide="true"></span>

或

<span [hide]="anyBooleanExpression"></span>

要在按钮上隐藏和显示div，请单击角度6。

HTML代码

<button (click)="toggleElement()">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf="isShow">
<table>
<tr>
<td>Name</td>
<td>Ram</td>
</tr>
</table>
</div>

AppComponent.ts代码

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
isShow=false;
toggleElement():void
{
this.isShow = !this.isShow
}
}

这对我来说很有效，它是一种在angular2+中替换ng-hide和ng-show的方法

<div [hidden]="flagValue">
---content---
</div>

Angular文档上有两个示例https://angular.io/guide/structural-directives#why-remove-rather-than-hide

指令可以通过将其显示样式设置为无来隐藏不需要的段落。

<p [style.display]="'block'">
Expression sets display to "block".
This paragraph is visible.
</p>


<p [style.display]="'none'">
Expression sets display to "none".
This paragraph is hidden but still in the DOM.
</p>

您可以使用[style.display]="'block'"来替换ngShow和[style.display]="'no'"来替换ngHide。

对我来说，[hidden]=!var从来没有工作过。

所以，<div *ngIf="expression" style="display:none;">

<div *ngIf="expression">总是给出正确的结果。

使用ngIf处理此问题的最佳方法 因为这将阻止该元素在前端呈现，

如果您使用[hidden]="true"或样式隐藏[style.display]，它只会隐藏前端的元素，并且有人可以更改它的值并轻松查看它， 在我看来，隐藏元素的最佳方法是ngIf

<div *ngIf="myVar">stuff</div>

如果您有多个元素（还需要实现其他元素），您可以使用<ng-template>选项

<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
<div>loadMenu</div>
</ng-template>


<ng-template #loadAdmin>
<div>loadAdmin</div>
</ng-template>

示例ng-模板代码

如果你只是想使用AngularJS附带的对称的hidden/shown指令，我建议编写一个属性指令来简化模板，就像这样（用Angular 7测试过）：

import { Directive, Input, HostBinding } from '@angular/core';


@Directive({ selector: '[shown]' })
export class ShownDirective {
@Input() public shown: boolean;


@HostBinding('attr.hidden')
public get attrHidden(): string | null {
return this.shown ? null : 'hidden';
}
}

许多其他解决方案是正确的。您应该尽可能使用*ngIf。使用hidden属性可以应用了意想不到的样式，但除非您正在为其他人编写组件，否则您可能知道它是否是。因此，要使这个shown指令起作用，您还需要确保添加：

[hidden]: {
display: none !important;
}

你的全球风格在某处。

有了这些，您可以像这样使用指令：

<div [shown]="myVar">stuff</div>

对称的（和相反的）版本如下：

<div [hidden]="myVar">stuff</div>

要添加到应该-yous还应该给我们一个前缀，例如[acmeShown] vs[shown]。

我使用shown属性指令的主要原因是当隐藏的内容包含导致XHR往返的容器组件时，将AngularJS代码转换为Angular-AND-。我不只是使用[hidden]="!myVar"的原因是它经常更复杂，比如：[hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[显示]'更容易思考。

这是什么为我工作：

<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>

我的问题是使用按钮单击显示/隐藏垫子表 。表的“加载”非常慢，2-3秒有300条记录。

数据是使用ngOnInit（）中的订阅加载的，并且可以在模板中使用，但是随着行数的增加，模板中表的“加载”变得越来越慢。

我的解决方案是将*ngif替换为：

<div [style.display]="activeSelected ? 'block' : 'none'">

. Now the table loads instantly when the button is clicked.

你有两个选择：

第一选择

[style.display]="!isShow ? 'block' : 'none'"

第二选择

myVarible可以是boolean

[hidden]="!myVarible"

使用[ngStyle]

[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"

[隐藏]="你的变量" 或 [style.display]="！ isShow？'块'：'无'"

这个答案适用于那些不知道如何使元素隐藏的人，从. ts文件中可见

TS文件

export class PostTweetComponent implements OnInit {
isHidden:boolean = false;
hide(){
this.isHidden = true;
}
unHide(){
this.isHidden = false;
}
}

超文本标记语言文件

<div [hidden]="isHidden">stuff</div>
<button (click)="hide()">Hide</button>
<button (click)="unHide()">UnHide</button>