698

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

AngularJS では、次のように記述します。

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

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

4

21 に答える 21

1139

プロパティはそのhiddenために使用できます

[hidden]="!myVar"

こちらもご覧ください

問題

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

スタイルがあるため、プランカーの例でどのように非表示にならないか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または属性を削除することによってのみ、実際に要素が表示されます。

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

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

*ngIf対[hidden]

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

于 2016-02-23T12:51:10.230 に答える
31

申し訳ありませんが、Angular 2 を使用する場合に安全でないと見なされる hidden へのバインディングには同意できません。

display: flex;

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

<div *ngIf="showGreeting">
   Hello, there!
</div>
于 2016-10-28T21:28:35.210 に答える
6

スタイルが表示なしの場合は、ngStyle ディレクティブを使用して表示を直接変更することもできます。ブートストラップのドロップダウンでは、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";
}
于 2016-08-08T15:22:27.483 に答える
5

モデルをコントロールにバインドしてcssを指定するように、 hiddenを使用します。

HTML:

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

CSS:

[hidden] {
   display: none;
}
于 2016-09-28T09:11:53.037 に答える
0

hiddenAngularJS に付属の対称的な/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に追加するには、 so [acmeShown]vs justのようなプレフィックスも使用する必要があり[shown]ます。

私が属性ディレクティブを使用した主な理由shownは、AngularJS コードを Angular に変換するためです。また、非表示にするコンテンツに、XHR ラウンド トリップを引き起こすコンテナー コンポーネントが含まれている場合でもあります。私が単に使用しない理由[hidden]="!myVar"は、多くの場合、次のようにもっと複雑[hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.だからです。

于 2019-12-10T05:47:46.283 に答える
0

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 を置き換えることができます。

于 2019-05-10T03:19:35.673 に答える