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

Question

我有一些元素希望在特定条件下可见。

在AngularJS中我会写

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

如何在 Angular 2+ 中执行此操作？

Answer 1

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 仍然包含它。

Answer 2

使用[hidden]属性：

[hidden]="!myVar"

或者您可以使用 *ngIf

*ngIf="myVar"

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

中

Answer 3

如果你的情况是样式是显示 none 你也可以使用 ngStyle 指令直接修改显示，我为 bootstrap DropDown 做的，它的 UL 设置为显示 none.

所以我创建了一个点击事件 "manually" 切换 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";
}

Answer 4

使用 hidden 就像您将任何 model 与控件绑定并指定 css 为它：

HTML:

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

CSS:

[hidden] {
   display: none;
}

Answer 5

<div [hidden]="myExpression">

myExpression 可以设置为 true 或 false

Answer 6

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

display: flex;

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

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

Answer 7

根据 Angular 1 文档 ngShow and ngHide，这两个指令都根据该指令的条件向元素添加了 css 样式 display: none !important;（对于 ngShow 添加 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 之前添加 !（不是），对于 [=28= 中的 hide 行为]2 我们不需要 在 ngHideVal.

之前添加 ! (not)

Answer 8

我发现自己处于相同的情况，但与我的情况不同，元素是 flex container.If 不是你的情况，一个简单的解决方法可能是

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

在我的例子中，由于我们支持的许多浏览器仍然需要供应商前缀来避免出现问题，我寻求另一个简单的解决方案

[class.is-loading]="isLoading"

那么 CSS 就很简单

&.is-loading { display: none }

离开则默认处理的显示状态class。

Answer 9

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

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

Answer 10

在bootstrap4.0中class"d-none"="display: none!important;"

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

Answer 11

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

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'因为我想保留元素占用的space。如果您不想这样做，您可以使用 'display' 并将其设置为 'none';

您可以将它绑定到您的 html 元素，动态或非动态。

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

或

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

Answer 12

在 angular 中单击按钮时隐藏和显示 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 的方法

Answer 13

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

Answer 14

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

A directive could hide the unwanted paragraph instead by setting its display style to none.

<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]="'none'" 替换 ngHide。

Answer 15

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

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

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

Answer 16

使用 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>

sample ng-template code

Answer 17

如果你只想使用 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>

要添加到应该 - 你也应该给我们一个像这样的前缀 [acmeShown] 而不是 [shown]。

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

Answer 18

这对我有用：

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

Answer 19

我的问题是 displaying/hiding 垫子 - table 按钮点击使用。 table 的 'loading' 非常慢，2-3 秒就有 300 条记录。

数据是使用 ngOnInit() 中的订阅加载的，并且可用并准备好在模板中使用，但是模板中 table 的 'loading' 变得越来越慢行数增加。

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

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

。现在 table 在单击按钮时立即加载。

Answer 20

你有两个选择：

第一个选项

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

第二个选项

myVarible 可以是布尔值

[hidden]="!myVarible"

Answer 21

使用[ngStyle]

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

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

What is the equivalent of ngShow and ngHide in Angular 2+?

angular-template

angular-components

angular