AngShow 2 में ngShow और ngHide के बराबर क्या है?

Question

मेरे पास कई तत्व हैं जो मैं कुछ शर्तों के तहत दिखाई देना चाहता हूं।

AngularJS में मैं लिखूंगा

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

मैं इसे एंगुलर 2+ में कैसे कर सकता हूं?

Comments

[छिपा हुआ] = "! myVar" .. यह कोणीय 2+ में काम करता है

— प्रगति दुगर

Answer 1

बस hiddenसंपत्ति को बांधें

[hidden]="!myVar"

यह सभी देखें

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

मुद्दे

hiddenहालांकि कुछ मुद्दे हैं क्योंकि यह displayसंपत्ति के लिए सीएसएस के साथ संघर्ष कर सकता है ।

कैसे देखें someमें Plunker उदाहरण छिपा हुआ नहीं होता है, क्योंकि यह एक शैली है

: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 बनाम [hidden]

*ngIfप्रभावी रूप से संपत्ति [hidden]को संशोधित करते हुए DOM से इसकी सामग्री को हटा देता है displayऔर केवल ब्राउज़र को सामग्री को न दिखाने का निर्देश देता है, लेकिन DOM में अभी भी यह शामिल है।

Comments

छिपी का उपयोग करना वास्तव में अनुशंसित नहीं है। angularjs.blogspot.com/2016/04/…

— सैम

*ngIfज्यादातर मामलों में सही तरीका हो सकता है, लेकिन कभी-कभी आप वास्तव में एक तत्व चाहते हैं, जो नेत्रहीन रूप से छिपा हो। [hidden]{display:none!important}मदद करता है के साथ एक सीएसएस शैली । उदाहरण के लिए, बूटस्ट्रैप कैसे सुनिश्चित करता है कि [hidden]तत्व वास्तव में छिपे हुए हैं।

— गीथहब

जब आप उपयोग करते हैं तो आप कुछ समस्या का सामना कर सकते हैं (myStream | async) पाइप के अंदर * ngIf जो भी उपयोग करता है (myStream | async) पाइप

— Pavel Blagodov

तुम मेरे तारणहार हो! * ngIf के उपयोग से DOM स्थिति को शीर्ष पर रीसेट कर दिया जाएगा लेकिन [छिपा] ने मेरी समस्या को हल कर दिया और स्थिति को संरक्षित कर दिया।

— संतोष

एक ऐसा मामला जहां कोई व्यक्ति [छिपी] ओवर एनजीआई का उपयोग करना चाहता है, जब आप HostListener का उपयोग कर रहे हैं (और दस्तावेज़ क्लिक बनाम ईवेंटटगेट में अंतर करना चाहते हैं), जब तत्वों को दिखाने और छिपाने की कोशिश कर रहे हैं (जैसे कस्टम ड्रॉप डाउन के साथ)

— akhouri

Answer 2

[hidden]विशेषता का उपयोग करें :

[hidden]="!myVar"

या आप उपयोग कर सकते हैं *ngIf

*ngIf="myVar"

किसी तत्व को दिखाने / छिपाने के ये दो तरीके हैं। एकमात्र अंतर यह है: *ngIfतत्व को DOM से हटा देगा जबकि [hidden]ब्राउज़र को बताएगा displayकि तत्व को DOM में रखकर CSS संपत्ति का उपयोग करते हुए / छिपाकर दिखाया गया है ।

Comments

[छिपा हुआ] सशर्त को तत्व में "छिपी" एक विशेषता जोड़ रहा है। यह [जो कुछ भी] या [अली] हो सकता है। यहां महत्वपूर्ण बात यह है कि एक सीएसएस नियम को लोड करना है जो "छिपी" विशेषताओं का उल्लेख करना है: कोई भी प्रदर्शित नहीं करना है

— गेब्रियल

ध्यान में रखें: * ngIf और [छिपा] मौलिक अलग हैं। ngIf * ngIf ब्लॉक के अंदर की सामग्री का मूल्यांकन नहीं करेगा जब तक कि हालत सही न हो। यह विशेष रूप से महत्वपूर्ण है यदि आप asyncपाइप का उपयोग करते हैं , क्योंकि पालन योग्य के लिए सदस्यता केवल शर्त के सच हो जाने के बाद जोड़ दी जाएगी!

— 7

एक और बात ध्यान में रखना है कि * ngIf घटक को नष्ट कर देता है और इसे फिर से बनाना पड़ता है, जबकि [छिपा हुआ] इसे जीवित और स्मृति में रखता है। यदि आपके पास संसाधन-गहन घटक है, तो इसे नष्ट करने के बजाय इसे छिपाना बेहतर हो सकता है

— माइकल कॉर्क।

वे एक ही चीज नहीं हैं।

— कामुरन सोनसेक

Answer 3

मैं अपने मामले में अंतर के साथ एक ही स्थिति में खुद को पाता हूं, तत्व एक फ्लेक्स कंटेनर था। अगर आपका मामला आसान काम नहीं है

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

मेरे मामले में इस तथ्य के कारण कि बहुत सारे ब्राउज़र जो हम समर्थन करते हैं, मुझे अभी भी एक और आसान समाधान के लिए गए समस्याओं से बचने के लिए विक्रेता उपसर्ग की आवश्यकता है

[class.is-loading]="isLoading"

जहां तब सीएसएस सरल है

&.is-loading { display: none } 

तब छोड़ना जब डिफॉल्ट क्लास द्वारा हैंडल किया गया डिस्प्ले स्टेट।

Comments

यह बूटस्ट्रैप 4 invalid-feedbackवर्ग के साथ अच्छी तरह से काम करता है ।

— जेस

Answer 4

क्षमा करें, मुझे एंगुलर का उपयोग करते समय छिपे हुए को असुरक्षित मानने से असहमत होना पड़ता है। ऐसा इसलिए है क्योंकि छिपी हुई शैली को उदाहरण के लिए आसानी से ओवरराइट किया जा सकता है

display: flex;

अनुशंसित दृष्टिकोण * ngIf का उपयोग करना है जो अधिक सुरक्षित है। अधिक जानकारी के लिए, कृपया आधिकारिक कोणीय ब्लॉग देखें। 5 धोखेबाज़ गलतियों से बचने के लिए कोणीय 2 के साथ

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

Comments

मुझे लगता है कि सटीक आवश्यकताओं को जानने से पहले कुछ कहना गलत है। यदि कोई नहीं चाहता है कि एक तत्व को हटा दिया जाए और नष्ट कर दिया जाए और जोड़ा और फिर से बनाया जाए, तो *ngIfयह एक खराब विकल्प है। लेकिन आप सही हैं कि परिणामों पर विचार करने की आवश्यकता है और हमेशा नुकसान का संकेत देना एक अच्छा विचार है।

— गुंटर ज़ोचबॉउर

मुझे पता है कि आपका क्या आशय है। यह मेरे शब्द नहीं है इसके बारे में एक नौसिखिया गलती है, यह एंगुलर 2 आधिकारिक ब्लॉग से ली गई है। मेरा मतलब किसी को नाराज करना नहीं है। यद्यपि इंगित करने के लिए धन्यवाद, यद्यपि।

— टिम होंग

हाँ, मुझे नहीं लगता कि ngIfवास्तव में इस सवाल का जवाब क्या है। मैं एक पृष्ठ पर कुछ सामग्री छिपाना चाहता हूं जिसमें एक शामिल है <router-outlet>। यदि मैं उपयोग करता हूं ngIf, तो मुझे एक त्रुटि मिलती है कि यह आउटलेट नहीं ढूंढ सकता है। मुझे अपने डेटा लोड होने तक छिपे रहने की आवश्यकता है, मेरे डेटा लोड होने तक अनुपस्थित नहीं ।

— जेसन स्विट

मैं आपसे सहमत हूं, लेकिन मेरे पास जो समस्या है वह यह है कि अगर मैं * ngIf का उपयोग करता हूं तो मैं एक फॉर्म दिखाना चाहता हूं और इसमें मान डाल सकता हूं कि मुझे यह त्रुटि होगी कि यह परिभाषित नहीं है और छिपी हुई संपत्ति के साथ यह अच्छी तरह से काम कर रहा है

— हजेम हसन

@ हज़मशासन, ज़रूर। मै समझता हुँ। समाधान हमेशा सशर्त होता है। आपके मामले में, यह निश्चित नहीं है कि यदि आप इसके खिलाफ कोई अन्य कोड चलाने से पहले यह जांचना संभव है कि क्या फॉर्म है या नहीं। यह सब व्यापार-बंद के बारे में है। क्या आप उस फ़ॉर्म को छिपाने के लिए एक सुरक्षित तरीका चाहते हैं जो भविष्य में गलती से किसी अन्य स्टाइल से ऑफसेट नहीं होगा? या क्या आप सुविधा की जाँच करना पसंद करते हैं कि फॉर्म मौजूद है या नहीं?

— टिम होंग

Answer 5

यदि आपका मामला यह है कि शैली कोई भी प्रदर्शित नहीं करता है, तो आप ngStyle निर्देश का उपयोग भी कर सकते हैं और सीधे प्रदर्शन को संशोधित कर सकते हैं, मैंने किया कि बूटस्ट्रैप ड्रॉपडाउन के लिए उल इस पर कोई भी प्रदर्शित करने के लिए सेट नहीं है।

इसलिए मैंने "मैन्युअल रूप से" यूएल को प्रदर्शित करने के लिए टॉगल करने के लिए एक क्लिक ईवेंट बनाया

<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: बूल विशेषता है जिसे मैं हर बार टॉगल करता हूं, और int के आधार पर, इस प्रकार के लिए प्रदर्शनDLL को शैली में सेट करें

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

Answer 6

NgShow और ngHide के कोणीय 1 प्रलेखन के अनुसार , ये दोनों निर्देश सीएसएस शैली को जोड़ते हैं display: none !important;, तत्व को उस निर्देश की स्थिति के अनुसार (ngShow के लिए css को गलत मान पर जोड़ा जाता है, और ngHide के लिए css को सही मान में जोड़ता है)।

हम कोणीय 2 निर्देशात्मक एनक्लॉस का उपयोग करके इस व्यवहार को प्राप्त कर सकते हैं:

/* 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 से पहले।

Answer 7

<div [hidden]="myExpression">

myExpression सही या गलत पर सेट हो सकता है

Comments

<div hidden="{{ myExpression }}">यह काम नहीं करेगा, क्योंकि "myExpression" html में प्रदान किए जाने वाले स्ट्रिंग में परिवर्तित हो जाएगा। दोनों "सच" और "झूठे" सत्य हैं, इसलिए यह हमेशा छिपा

— रहेगा

Answer 8

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो यह उतना ही सरल है:

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

Comments

बूटस्ट्रैप में 4 का उपयोग [hidden]वही करता है जिससे मैं सलाह देता हूं[hidden]

— वाहिद

Answer 9

बूटस्ट्रैप 4.0 में वर्ग "d-none" = "प्रदर्शन: कोई नहीं? महत्वपूर्ण?"

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

Answer 10

इस मुद्दे पर किसी और की ठोकर के लिए, मैंने इसे पूरा किया।

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 11

छिपे का उपयोग करें जैसे आप किसी भी मॉडल को नियंत्रण के साथ बांधते हैं और इसके लिए सीएसएस निर्दिष्ट करते हैं:

HTML:

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

सीएसएस:

[hidden] {
   display: none;
}

Answer 12

इसी से मेरा काम बना है:

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

Answer 13

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

Answer 14

मेरे लिए, [hidden]=!varकभी काम नहीं किया।

इसलिए, <div *ngIf="expression" style="display:none;">

और, <div *ngIf="expression">हमेशा सही परिणाम दें।

Answer 15

कोणीय दस्तावेजों पर दो उदाहरण हैं 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>

आप ngHhow को बदलने के लिए [style.display] = "'block'" और ngHide को बदलने के लिए [style.display] = "'none' 'का उपयोग कर सकते हैं।

Answer 16

इस समस्या से निपटने का सबसे अच्छा तरीका है 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>  

नमूना एनजी-टेम्पलेट कोड

Answer 17

यदि आप केवल सममित hidden/ shownनिर्देशों का उपयोग करना चाहते हैं, जो AngularJS के साथ आया है, तो मैं इस तरह से टेम्पलेट्स को सरल बनाने के लिए एक विशेषता निर्देश लिखने का सुझाव देता हूं: (कोणीय 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]बस [shown]।

मुख्य कारण मैंने एक shownविशेषता निर्देश का उपयोग किया, जो कि कोणीयजेएस कोड को कोणीय-एंड में परिवर्तित करने के लिए है- जब छिपाई जा रही सामग्री में कंटेनर घटक होते हैं जो एक्सएचआर दौर यात्राओं का कारण बनते हैं। मेरे द्वारा उपयोग न करने का कारण [hidden]="!myVar"यह है कि अक्सर यह अधिक जटिल होता है जैसे: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[दिखाया गया] `के बारे में सोचना आसान है।

Answer 18

बटन को छिपाने और दिखाने के लिए कोणीय 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;
  }

यह मेरे लिए काम करता है और यह एनजी-छिपाने और एनजी-शो को कोणीय 6 में बदलने का तरीका है।

का आनंद लें...

धन्यवाद

Comments

आप ngIf का उपयोग कर रहे हैं - जो ngShow से अलग है। Ngff DOM को एलिमेंट फॉर्म को हटा / जोड़ देगा। यह ngShow / ngHide के समान नहीं है जो केवल तत्व में Css शैलियों को जोड़ / हटा देगा।

— गिल एप्सटेन

उदाहरण बहुत लंबा और बहुत विशिष्ट है।

— मास्टरएक्सिलो