Angular 2+のngShowとngHideに相当するものは何ですか？

特定の条件下で表示したい要素がいくつかあります。

AngularJSで私は書くでしょう

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

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

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または属性を削除すると、実際に要素が表示されます。

を使用する{{}}と、式も文字列に変換され、期待どおりに機能しません。

の代わりにとして割り当てられている[]ため、とのバインドのみが期待どおりに機能します。falsefalse"false"

*ngIf 対 [hidden]

*ngIfプロパティを[hidden]変更しながら、コンテンツをDOMから効果的に削除し、コンテンツをdisplay表示しないようにブラウザに指示するだけで、DOMにはまだコンテンツが含まれています。

次の[hidden]属性を使用します。

[hidden]="!myVar"

またはあなたが使うことができます *ngIf

*ngIf="myVar"

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

私は同じ状況にありますが、要素がフレックスコンテナーの場合とは異なります。そうでない場合、簡単な回避策は次のとおりです。

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

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

[class.is-loading]="isLoading"

CSSは次のように単純です

&.is-loading { display: none } 

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

申し訳ありませんが、Angular 2を使用する際に安全ではないと見なされる非表示へのバインドに同意する必要があります。これは、非表示のスタイルが次のように簡単に上書きされる可能性があるためです

display: flex;

推奨されるアプローチは、より安全な* ngIfを使用することです。詳細については、公式Angularブログを参照してください。Angular 2で回避すべき5つの新人の間違い

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

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

Angular 1のngShowとngHideのドキュメントによると、これらのディレクティブは両方とも、display: none !important;そのディレクティブの条件に従って要素にcssスタイルを追加します（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>

用することをお知らせshowAngular2での動作我々が追加する必要があり!ngShowVal前に（ない）、とのためにhideAngular2での動作私たちはしていない追加する必要があり!ngHideVal前に（ではありません）。

<div [hidden]="myExpression">

myExpressionはtrueまたはfalseに設定できます

ブートストラップを使用している場合は、次のように簡単です。

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

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

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

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

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>

モデルをコントロールにバインドし、CSSを指定するように非表示を使用します。

HTML：

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

CSS：

[hidden] {
   display: none;
}

これは私のために働いたものです：

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

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

私にとって、[hidden]=!var働いたことはありません。

そう、 <div *ngIf="expression" style="display:none;">

そして、 <div *ngIf="expression">常に正しい結果を与える。

Angularドキュメントには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>

[style.display] = "'block'"を使用してngShowを置き換え、[style.display] = "'none'"を使用してngHideを置き換えることができます。

を使用してこの問題に対処する最良の方法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>  

ng-templateコードのサンプル

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>

shouldsに追加するために-yousは、そのような接頭辞[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.[示されている] `の方が簡単に考えることができます。

ボタンのdivを表示または非表示にするには、角度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を置き換える方法です。

楽しい...

ありがとう