कोणीय 2 दिखाएँ और एक तत्व छिपाएँ

174

मुझे एंगुलर 2 में बूलियन चर के आधार पर एक तत्व को छिपाने और दिखाने में समस्या हो रही है।

यह div को दिखाने और छिपाने के लिए कोड है:

<div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

चर "संपादित" है और यह मेरे घटक में संग्रहीत है:

export class AppComponent implements OnInit{

  (...)
  public edited = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }, 3000);
  }
}

तत्व छिपा हुआ है, जब saveTodos फ़ंक्शन शुरू होता है, तो तत्व दिखाया जाता है, लेकिन 3 सेकंड के बाद, भले ही चर वापस झूठ हो, तत्व छिपता नहीं है। क्यों?

typescript angular

167

आपको * ngIf Directive का उपयोग करना चाहिए

<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>


export class AppComponent implements OnInit{

  (...)
  public edited = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);
  }
}

अपडेट: जब आप टाइमआउट कॉलबैक के अंदर होते हैं तो आप बाहरी दायरे के संदर्भ को याद कर रहे हैं।

इसलिए .bind जोड़ें (यह) जैसे मैंने ऊपर जोड़ा

प्रश्न: संपादित एक वैश्विक चर है। * NgFor-loop के भीतर आपका दृष्टिकोण क्या होगा? - ब्लाहिरन

A: मैं उस ऑब्जेक्ट के लिए एक संपत्ति के रूप में संपादित करूंगा, जिसे मैं देख रहा हूं।

<div *ngFor="let obj of listOfObjects" *ngIf="obj.edited" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>


export class AppComponent implements OnInit{
   
  public listOfObjects = [
    {
       name : 'obj - 1',
       edit : false
    },
    {
       name : 'obj - 2',
       edit : false
    },
    {
       name : 'obj - 2',
       edit : false
    } 
  ];
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);
  }
}

— inoabrian
स्रोत

editedएक वैश्विक चर है। एक के भीतर आपका दृष्टिकोण क्या होगा *ngFor-loop?

— दर्शन २

संपादित एक वैश्विक चर नहीं होगा, यह घटक के अंतर्गत आता है। मैं ऊपर जवाब जोड़ दूंगा।

— Inababrian

सेवा से विश्व स्तर पर टाइमर का उपयोग कैसे करें?

— कुमारसन पेरुमल

1

एनजीआईएफ कारण कुछ कोणीय सामग्री के घटकों को ठीक करने और ठीक से काम करने में विफल रहता है, जैसे मैट-पेजिनेटर। मुझे लगता है कि [छिपी] का उपयोग करना कुछ मामलों के लिए बेहतर विकल्प है।

— अमीरहोसिन रेज़ाई

186

आप जो हासिल करना चाहते हैं, उसके आधार पर दो विकल्प हैं:

आप किसी तत्व को दिखाने या छिपाने के लिए छिपे हुए निर्देश का उपयोग कर सकते हैं
```
<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
  <strong>List Saved!</strong> Your changes has been saved.
</div>
```
आप तत्व को जोड़ने या निकालने के लिए ngIf नियंत्रण निर्देश का उपयोग कर सकते हैं। यह छिपे हुए निर्देश से अलग है क्योंकि यह तत्व को नहीं दिखाता / छिपाता है, लेकिन यह DOM से जोड़ / हटाता है। आप तत्व के सहेजे गए डेटा को ढीला कर सकते हैं। यह एक घटक को रद्द करने के लिए बेहतर विकल्प हो सकता है।
```
<div *ngIf="edited" class="alert alert-success box-msg" role="alert"> 
  <strong>List Saved!</strong> Your changes has been saved.
</div>
```

आपके लिए 3 सेकंड के बाद परिवर्तन की समस्या, यह सेटटाइमआउट के साथ असंगति के कारण हो सकता है। क्या आपने अपने पृष्ठ में angular2-polyfills.js पुस्तकालय शामिल किया है?

— gentiane
स्रोत

5

[hidden]="edited"लगता है कोई प्रभाव नहीं है ...?

— दर्शन 294

5

मामले में आप छिपा के साथ समस्या है, के जवाब का पालन करें stackoverflow.com/a/35578093/873282 : [hidden] { display: none !important;}अपने वैश्विक सीएसएस में।

— koppor

30

जब आप एचटीएमएल डोम-एलिमेंट को हटाने के बारे में परवाह नहीं करते हैं, तो * ngIf का उपयोग करें।

अन्यथा, इसका उपयोग करें:

<div [style.visibility]="(numberOfUnreadAlerts == 0) ? 'hidden' : 'visible' ">
   COUNTER: {{numberOfUnreadAlerts}} 
</div>

— डूडी
स्रोत

14

चाइल्ड कंपोनेंट दिखाने के लिए मैं उपयोग कर रहा था *ngif="selectedState == 1"

इसके बजाय मैंने इस्तेमाल किया [hidden]="selectedState!=1"

यह मेरे लिए काम करता है .. बाल घटक को ठीक से लोड करना और छिपाने के बाद और अन-छिपी बाल घटक का उपयोग करने के बाद अपरिभाषित नहीं था।

— स्वप्निल काले
स्रोत

6

यह एक निर्देश के लिए एक अच्छा उपयोग मामला है। ऐसा कुछ आश्चर्यजनक रूप से उपयोगी है।

@Directive({selector: '[removeAfter]'}) export class RemoveAfter {
  constructor(readonly element: ElementRef<HTMLElement>) { }

  /**
   * Removes the attributed element after the specified number of milliseconds. 
   * Defaults to (1000)
   */
  @Input() removeAfter = 1000;


  ngOnInit() {
    setTimeout(() => {
      this.element.nativeElement.remove();
    }, this.removeAfter);
  }
}

— अलुआन हदद
स्रोत

मुझे विचार पसंद है, लेकिन यह तत्व को पूरी तरह से हटा देगा। मैंने इसे छिपाने के लिए बदल दिया है, इसलिए आप इसे पुन: उपयोग कर सकते हैं लेकिन यह तत्व को संभवतः के कारण छिपा नहीं ngIfहै true। क्या माता-पिता के चर को सेट करने का एक तरीका है जो इसे नियंत्रित करता है false?

— कभी

क्या आप केवल कॉल हटाने के बजाय एक छिपे हुए वर्ग या कुछ को जोड़ नहीं सकते हैं? यह तकनीक बहुत सामान्य है।

— एलुआन हद्दाद

मुझे लगता है कि यह समस्या ngIfअधिक है कि तत्व DOM में है या नहीं। मैं जो चाहता हूं वह यह है: <div [hidden]="messages" [removeAfter]=3000>...जहां मैं संदेश दिखाता / छिपाता हूं अगर कोई हो और फिर 3 सेकंड के बाद संदेश हटा दें, ताकि उपयोगकर्ता को बॉक्स बंद न करना पड़े। मैंने आपके निर्देश को ऊपर जोड़ा और इसे करने के लिए स्विच किया, hide()लेकिन जब संदेश दिखाए जाते हैं तो इसे कॉल नहीं किया जाता है। मुझे इस घटना पर कैसे आमंत्रित करना है? @Output()और EventEmitter?

— कभी

4

हम इसे नीचे दिए गए कोड स्निपेट का उपयोग करके कर सकते हैं ।।

कोणीय कोड:

 export class AppComponent {  
    toggleShowHide: string = "visible";  
 }

HTML टेम्पलेट:

  Enter text to hide or show item in bellow: 
  <input type="text" [(ngModel)]="toggleShowHide">
  <br>
  Toggle Show/hide:
  <div [style.visibility]="toggleShowHide">   
     Final Release Angular 2!
  </div>

— रेजवानुल रजा
स्रोत

3

आपकी आवश्यकताओं के आधार पर, *ngIfया [ngClass]="{hide_element: item.hidden}"जहां सीएसएस वर्ग hide_elementहै{ display: none; }

*ngIfयदि आप राज्य चर *ngIfको हटा रहे हैं तो समस्याएँ पैदा कर सकते हैं , उन मामलों में CSS display: none;का उपयोग करना आवश्यक है।

— ल्यूक डुपिन
स्रोत

0

@inoabrian solution ऊपर मेरे लिए काम करता है। मैं ऐसी स्थिति में भाग गया, जहाँ मैं अपने पृष्ठ को ताज़ा करूँगा और मेरा छिपा हुआ तत्व मेरे पृष्ठ पर फिर से दिखाई देगा। यहां मैंने इसे हल करने के लिए क्या किया।

export class FooterComponent implements OnInit {
public showJoinTodayBtn: boolean = null;

ngOnInit() {
      if (condition is true) {
        this.showJoinTodayBtn = true;
      } else {
        this.showJoinTodayBtn = false;
      }
}

— जेसन स्पेंस
स्रोत

0

बस अपने setTimeout फ़ंक्शन में बाइंड (यह) जोड़ें यह काम करना शुरू कर देगा

setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);

और HTML बदलाव में

<div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

सेवा

<div *ngIf="edited" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

— मुकेश रावत
स्रोत