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 示例中的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 仍然包含它。

Answer 2

使用[hidden]属性：

[hidden]="!myVar"

或者你可以使用*ngIf

*ngIf="myVar"

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

Answer 3

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

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

就我而言，由于我们支持的许多浏览器仍然需要供应商前缀以避免出现问题，因此我寻求另一个简单的解决方案

[class.is-loading]="isLoading"

那么CSS很简单

&.is-loading { display: none } 

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

Answer 4

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

display: flex;

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

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

Answer 5

这对我有用：

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

Answer 6

<div [hidden]="myExpression">

myExpression 可以设置为 true 或 false

Answer 7

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

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>

Answer 8

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

Answer 9

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

HTML：

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

CSS：

[hidden] {
   display: none;
}

Answer 10

根据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 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之前，以及hide在Angular2行为，我们并不需要添加! （不是）在 ngHideVal 之前。

Answer 11

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

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

Answer 12

在 bootstrap 4.0 中，类 "d-none" = "display: none!important;"

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

Answer 13

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

Answer 14

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

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

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

Answer 15

使用[ngStyle]

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

Answer 16

使用ngIf处理此问题的最佳方法 因为这可以防止在前端渲染该元素，

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

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

并且如果您有多个元素（还需要实现 else），您可以使用<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 模板代码

Answer 17

我的问题是使用 <ng-container *ngIf="myVar"> 在单击按钮时显示/隐藏 mat-table。 表的“加载”非常慢，2-3 秒有 300 条记录。

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

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

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

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

Answer 18

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。

Answer 19

如果您只想使用 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] VS刚刚[shown] 。

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

Answer 20

您有两个选择：

第一个选项

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

第二种选择

myVarible 可以是布尔值

[hidden]="!myVarible"

Answer 21

[hidden]="yourVariable" OR [style.display]="?isShow: 'block' : 'none'"

Answer 22

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

TS 文件

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

HTML 文件

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

Answer 23

要在按钮上隐藏和显示 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 的方法