web-dev-qa-db-ja.com

のngShowとngHideと同等のものは何ですか Angular 2+？

特定の条件下で見えるようにしたい要素がいくつかあります。

AngularJSで私は書くだろう

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

Angular 2+でこれを行うにはどうすればよいですか？

angularangular-components
435
Mihai Răducanu

hiddenプロパティにバインドするだけです

[hidden]="!myVar"

また見なさい

問題

hiddenは、displayプロパティに関してCSSと競合する可能性があるため、いくつか問題があります。

Plunkerの例 のsomeがスタイルを持っているために隠されないのをご覧ください。

:Host {display: block;}

セット。 （これは他のブラウザとは異なる動作をする可能性があります - 私はChrome 50でテストしました）

回避策

あなたはそれを追加することによってそれを修正することができます

[hidden] { display: none !important;}

index.htmlのグローバルスタイルへ。

もう1つの落とし穴 

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

と同じです

hidden="true"

要素は表示されません。

hidden="false"は、真と見なされる文字列"false"を割り当てます。
値falseのみ、または属性を削除すると、実際に要素が表示されます。

{{}}を使用すると式も文字列に変換され、期待通りに動作しません。

このfalseは[]ではなくfalseとして割り当てられているため、"false"とのバインディングのみが正常に機能します。

*ngIfと[hidden]

*ngIfは実質的にその内容をDOMから削除しますが、[hidden]はdisplayプロパティを変更してブラウザにその内容を表示しないように指示するだけですが、DOMはそれを含みます。

749
Günter Zöchbauer

[hidden]属性を使用してください。

[hidden]="!myVar"

あるいは*ngIfを使うこともできます

*ngIf="myVar"

これらは要素を表示/非表示にする2つの方法です。唯一の違いは、*ngIfはDOMから要素を削除するのに対し、[hidden]は要素をDOMに保持することでCSSのdisplayプロパティを使用して要素を表示/非表示にするようブラウザに指示します。

124
Ali Shahzad

私は、要素がフレックスコンテナである場合とは違いがあるのと同じ状況にあることに気付きました。

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

私の場合は、私たちがサポートしているブラウザの多くが、問題を回避するためにベンダープレフィックスを必要としているという事実が原因で、私は別の簡単な解決策を模索しました。

[class.is-loading]="isLoading"

それではCSSは以下のように単純です。

&.is-loading { display: none }

表示状態をデフォルトのクラスで処理したままにします。

24
Vale Steve

申し訳ありませんが、Angular 2を使用すると安全ではないと考えられるhiddenへのバインドに同意する必要があります。

display: flex;

推奨される方法は、安全な* ngIfを使用することです。詳しくは、公式のAngularブログを参照してください。 Angular 2を避けたい5人のルーキーのミス2

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

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の前に!（ない）を追加する必要があり、Angular2のhide動作の場合はngHideValの前に!（ない）を追加する必要があります。

4
Gil Epshtain

Bootstrap を使用している場合は、これと同じくらい簡単です。

<div [class.hidden]="myBooleanValue"></div>
3
Gian Marco Gherardi

スタイルが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";
}
3
Gary

この問題に遭遇する他の誰にとっても、これが私がそれを達成した方法です。

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>
3
Anjil Dhamala

ブートストラップ4.0では、クラス "d-none" = "display：none！important;"

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

hidden を使用して、任意の model をコントロールでバインドし、 css を指定します。

HTML： 

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

CSS： 

[hidden] {
   display: none;
}
2
Sandip - Full Stack Developer
<div [hidden]="flagValue">
---content---
</div>
1
Chirag
<div hidden="{{ myExpression }}">
<div [hidden]="myExpression">

myExpressionがtrueまたはfalseに設定されている可能性があります

1
Niyaz

Angular documents に2つの例があります - https://angular.io/guide/structural-directives#why-remove-rather-than-hide

ディレクティブは、表示スタイルを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>

NgShowを置き換えるには[style.display] = "'block'"を、ngHideを置き換えるには[style.display] = "'none'"を使用できます。

0
koo

角度6のボタンクリックでdivを隠して表示するには /

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;
  }

これは私にとってはうまくいき、ng-hideとng-showをangular6に置き換える方法です。

楽しい...

ありがとう

0
Manoj Gupta