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

hidden 属性可用于此

[hidden]="!myVar"

也可以看看

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

问题

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

看看 Plunker example 中的 some 如何不会因为有样式而被隐藏

:host {display: block;}

放。 （这可能在其他浏览器中表现不同 - 我用 Chrome 50 测试过）

解决方法

您可以通过添加来修复它

[hidden] { display: none !important;}

index.html 中的全局样式。

另一个陷阱

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

是一样的

hidden="true"

并且不会显示元素。

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

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

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

*ngIf 与 [hidden]

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

---

使用 [hidden] 属性：

[hidden]="!myVar"

或者您可以使用 *ngIf

*ngIf="myVar"

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

---

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

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

在我的情况下，由于我们支持的许多浏览器仍然需要供应商前缀以避免出现问题，我选择了另一个简单的解决方案

[class.is-loading]="isLoading"

那么CSS很简单

&.is-loading { display: none } 

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

---

抱歉，我不同意绑定到 hidden ，这在使用 Angular 2 时被认为是不安全的。这是因为隐藏样式可以很容易地被覆盖，例如使用

display: flex;

推荐的方法是使用更安全的 *ngIf。更多详细信息，请参考 Angular 官方博客。 5 Rookie Mistakes to Avoid with Angular 2

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

---

这对我有用：

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

---

<div [hidden]="myExpression">

myExpression 可以设置为 true 或 false

---

对于其他偶然发现这个问题的人，这就是我完成它的方式。

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>

---

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

---

如果您的情况是样式为无显示，您也可以使用 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";
}

---

使用 hidden 就像您将任何模型与控件绑定并为其指定 css 一样：

HTML：

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

CSS：

[hidden] {
   display: none;
}

---

如果你使用 Bootstrap 就这么简单：

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

---

在引导程序 4.0 中，类 "d-none" = "display: none!important;"

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

---

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

---

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

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

而且，<div *ngIf="expression"> 始终给出正确的结果。

---

使用 [ngStyle]

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

---

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

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

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