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




angular (6)

मुझे एंगुलर 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 सेकंड के बाद, भले ही चर वापस झूठ हो, तत्व छिपता नहीं है। क्यों?


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

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

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

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

  1. आप किसी तत्व को दिखाने या छिपाने के लिए छिपे हुए निर्देश का उपयोग कर सकते हैं

    <div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
      <strong>List Saved!</strong> Your changes has been saved.
    </div>
  2. आप तत्व जोड़ने या हटाने के लिए एनजीआईएफ नियंत्रण निर्देश का उपयोग कर सकते हैं। यह छिपे हुए निर्देश से अलग है क्योंकि यह तत्व को नहीं दिखाता / छिपाता है, लेकिन यह 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 पुस्तकालय शामिल किया है?


आपको * 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);
  }
}

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

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

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

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

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

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


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

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




angular