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

时间：2016-02-23 12:50:28

标签： angular angular-components angular-template

我希望在某些条件下可以看到许多元素。

在AngularJS中我会写

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

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

20 个答案:

答案 0 :(得分：763)

只需绑定到hidden属性

[hidden]="!myVar"

另见

<强>问题

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 vs [hidden]

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

答案 1 :(得分：125)

使用[hidden]属性：

[hidden]="!myVar"

或者您可以使用*ngIf 

*ngIf="myVar"

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

答案 2 :(得分：25)

我发现自己处于相同的情况，区别于我的情况，元素是一个弹性容器。如果不是你的情况，那么一个简单的工作可能是

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

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

[class.is-loading]="isLoading"

然后CSS很简单

&.is-loading { display: none }

然后保留默认类处理的显示状态。

答案 3 :(得分：23)

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

display: flex;

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

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

答案 4 :(得分：10)

这对我有用：

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

答案 5 :(得分：4)

根据ngShow和ngHide的Angular 1文档，这两个指令都根据该指令的条件将css样式display: none !important;添加到元素中（对于ngShow添加了css on false value，for ngHide将css添加为true值。）

我们可以使用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之前添加!（不）。

答案 6 :(得分：3)

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

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>

答案 7 :(得分：3)

如果您使用Bootstrap就像这样简单：

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

答案 8 :(得分：3)

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

答案 9 :(得分：2)

在bootstrap 4.0中，类“d-none”=“display：none！important;”

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

答案 10 :(得分：2)

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

<强> HTML： 

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

<强> CSS： 

[hidden] {
   display: none;
}

答案 11 :(得分：1)

<div hidden="{{ myExpression }}">
<div [hidden]="myExpression">

myExpression可能设置为true或false

答案 12 :(得分：1)

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

答案 13 :(得分：1)

我的问题是使用 。表的“加载”非常慢，2-3 秒内有 300 条记录。

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

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

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

。 现在，当点击按钮时，表格会立即加载。

答案 14 :(得分：0)

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

HTML代码

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

.ts组件代码

tee

这对我有用，它是在angular6中替换ng-hide和ng-show的方法。

享受...

谢谢

答案 15 :(得分：0)

关于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] =“'none'”替换ngHide。

答案 16 :(得分：0)

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

答案 17 :(得分：0)

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

答案 18 :(得分：0)

您有两个选择：

首选

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

第二个选项

myVarible 可以是布尔值

[hidden]="!myVarible"

答案 19 :(得分：-1)

对我来说， [hidden]=!var 从未起作用。

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

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

相关问题
最新问题