首页 文章

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

提问于
浏览 次
370

我想要在某些条件下看到许多元素 .

在AngularJS中我会写

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

我怎么能在Angular中做到这一点？

angular angular-components

12 回答

  • 3

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

    <div [ngClass]="{'d-none': exp}"> </div>
    回复于
  • 21

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

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

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

    [class.is-loading]="isLoading"

    那里的CSS很简单

    &.is-loading { display: none }

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

    回复于
  • 0

    只需绑定到 hidden 属性即可

    [hidden]="!myVar"

    也可以看看

    issues

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

    了解Plunker example中的 some 如何隐藏，因为它有一个样式

    :host {display: block;}

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

    workaround

    您可以通过添加来修复它

    [hidden] { display: none !important;}

    在 index.html 中的全球风格 .

    another pitfall

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

    回复于
  • 642
    <div hidden="{{ myExpression }}">
<div [hidden]="myExpression">

    myExpression可能设置为true或false

    回复于
  • 105

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

    HTML:

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

    CSS:

    [hidden] {
   display: none;
}
    回复于
  • 4

    根据ngShow和ngHide的Angular 1文档，这两个指令都根据该指令的条件将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之前添加 ! （not），而对于Angular2中的 hide 行为，我们需要在ngHideVal之前添加 ! （不是） .

    回复于
  • 1

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

    <div [class.hidden]="myBooleanValue"></div>
    回复于
  • 17
    *ngIf="myVar"

    要么

    [hidden]="!myVar"

    这是显示/隐藏元素的两种方法 . *ngIf 和 [hidden] 之间的唯一区别是 *ngIf 将添加或完全从DOM中删除元素但是使用 [hidden] 浏览器将使用CSS的 display 属性显示/隐藏元素，它将保留在DOM中 .

    回复于
  • 2

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

    display: flex;

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

    <div *ngIf="showGreeting">
   Hello, there!
</div>
    回复于
  • 2

    如果您的情况是样式显示无，您也可以使用ngStyle指令并直接修改显示，我为引导程序DropDown执行了此操作，其上的UL设置为none .

    所以我创建了一个点击事件，用于“手动”切换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";
}
    回复于
  • 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>
    回复于
  • 1

    To hide and show div on button click in angular 6.

    Html代码

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

    组件.ts代码

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

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

    请享用...

    谢谢

    回复于

相关问题