কৌণিক 2 একটি উপাদান দেখান এবং লুকান

Question

অ্যাঙ্গুলার 2 এ বুলিয়ান ভেরিয়েবলের উপর নির্ভর করে একটি উপাদান লুকিয়ে রাখতে এবং দেখায় আমার সমস্যা হচ্ছে।

এটি ডিভ প্রদর্শন এবং লুকানোর জন্য কোড:

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

এলিমেন্টটি লুকানো থাকে, যখন সেভোটোডস ফাংশন শুরু হয়, উপাদানটি প্রদর্শিত হয়, তবে 3 সেকেন্ড পরেও যদি ভেরিয়েবলটি মিথ্যা বলে ফিরে আসে, তবুও উপাদানটি লুকায় না। কেন?

Answer 1

আপনার * এনজিআইএফ নির্দেশিকা ব্যবহার করা উচিত

<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 (এটি) যুক্ত করুন

প্রশ্ন: সম্পাদিত একটি গ্লোবাল ভেরিয়েবল। * এনজিফোর্ড-লুপের মধ্যে আপনার পদ্ধতির কী হবে? - ব্লুহির্ন

উত্তর: আমি যে বস্তুর উপরে পুনরাবৃত্তি করছি তার একটি সম্পত্তি হিসাবে আমি সম্পাদনা যুক্ত করব।

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

Comments

editedবিশ্বব্যাপী পরিবর্তনশীল। এ এর মধ্যে আপনার পদ্ধতির কী হবে *ngFor-loop?

— ফিল্ড 294

সম্পাদিত কোনও বৈশ্বিক পরিবর্তনশীল হবে না, এটি উপাদানটির অন্তর্গত। আমি উপরে উত্তর যুক্ত করব।

— ইনোব্রিবিয়ান

কীভাবে বিশ্বব্যাপী পরিষেবা থেকে টাইমার অ্যাক্সেস করবেন?

— কুমারসান পেরুমাল

এনজিআইফের ফলে কিছু কৌণিক উপাদান উপাদান আরম্ভ এবং সঠিকভাবে কাজ করতে ব্যর্থ হয়, যেমন মাদুর-প্যাগেইনেটর I আমি মনে করি [লুকানো] কিছু ক্ষেত্রে ব্যবহার করা ভাল পছন্দ।

— আমিরহসাইন রেজায়ে

Answer 2

আপনি কী অর্জন করতে চান তার উপর নির্ভর করে দুটি বিকল্প রয়েছে:

1. কোনও উপাদান দেখানোর বা আড়াল করার জন্য আপনি লুকানো নির্দেশ ব্যবহার করতে পারেন

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

2. উপাদানটি যুক্ত করতে বা অপসারণ করতে আপনি এনজিআইএফ নিয়ন্ত্রণ নির্দেশিকা ব্যবহার করতে পারেন। এটি গোপন নির্দেশাবলীর থেকে আলাদা কারণ এটি উপাদানটি দেখায় / লুকায় না, তবে এটি ডিওএম থেকে যুক্ত / সরান। আপনি উপাদানটির সংরক্ষণ না করা ডেটা আলগা করতে পারেন। এটি বাতিল হওয়া কোনও সম্পাদনা উপাদানটির জন্য এটি আরও ভাল পছন্দ হতে পারে।

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

আপনার 3 সেকেন্ড পরে পরিবর্তনের সমস্যার জন্য এটি সেটটাইমআউটের সাথে বেমানান হওয়ার কারণে হতে পারে। আপনি কি আপনার পৃষ্ঠায় কৌণিক 2-পলফিল.জেএস লাইব্রেরি অন্তর্ভুক্ত করেছিলেন?

Comments

[hidden]="edited"এর কোন প্রভাব আছে বলে মনে হচ্ছে না ...?

— ফিল্ড 294

যদি আপনার কোনও সমস্যা লুকানো থাকে তবে দয়া করে আপনার গ্লোবাল CSS এ স্ট্যাকওভারফ্লো . com / a / 35578093 / 873282 : অনুসরণ করুন [hidden] { display: none !important;}।

— কোপ্পোর

Answer 3

আপনি যখন এইচটিএমএল ডোম-এলিমেন্ট অপসারণের বিষয়ে চিন্তা করবেন না, তখন * এনজিআইফ ব্যবহার করুন।

অন্যথায়, এটি ব্যবহার করুন:

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

Answer 4

শিশু উপাদান দেখানোর জন্য আমি ব্যবহার করছিলাম *ngif="selectedState == 1"

পরিবর্তে আমি ব্যবহার [hidden]="selectedState!=1"

এটি আমার পক্ষে কাজ করেছে .. সন্তানের উপাদানটি সঠিকভাবে লোড করা এবং লুকানো এবং আন-লুকানোর পরে শিশু উপাদানটি ব্যবহার করার পরে অপরিবর্তিত হয়নি।

Answer 5

এটি একটি নির্দেশনার জন্য ভাল ব্যবহারের কেস। এরকম কিছু আশ্চর্যজনকভাবে কার্যকর।

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

Comments

আমি ধারণাটি পছন্দ করি তবে এটি উপাদানটিকে পুরোপুরি সরিয়ে ফেলবে। আমি লুকিয়ে রাখবেন তা পরিবর্তন তাই আপনি এটি পুনরায় ব্যবহার করতে পারে কিন্তু যে উপাদান সম্ভবতঃ কারণে লুকায় না ngIfহয় true। পিতামাতার পরিবর্তনশীল সেট করার কোনও উপায় আছে যা এটিকে নিয়ন্ত্রণ করে false?

— অনুষ্ঠানগুলি

আপনি কি রিলিং কল করার পরিবর্তে কোনও গোপন শ্রেণি বা কিছু যুক্ত করতে পারবেন না? এই কৌশলটি বেশ জেনেরিক।

— আলুয়ান হাদাদ

আমি মনে করি যে ngIfউপাদানটি ডিওমে রয়েছে কিনা তা নিয়ে সমস্যাটি আরও বেশি। আমি যা চাই তা হ'ল: <div [hidden]="messages" [removeAfter]=3000>...যেখানে আমি কোনও বার্তা প্রদর্শন / লুকিয়ে রাখি এবং তারপরে 3 সেকেন্ড পরে বার্তাগুলি সরিয়ে ফেলি যাতে ব্যবহারকারীর বাক্সটি বন্ধ করতে না হয়। আমি উপরে আপনার নির্দেশিকা যুক্ত করেছি এবং এটি করতে একটি পরিবর্তন করেছি hide()তবে বার্তা প্রদর্শিত হয় যখন এটি কল হয় না। আমি কীভাবে এটিকে ইভেন্টে আমন্ত্রণ জানাতে পারি? @Output()এবং EventEmitter?

— ঘটনা

Answer 6

আমরা নীচের কোড স্নিপেট ব্যবহার করে এটি করতে পারি ..

কৌনিক কোড:

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

এইচটিএমএল টেমপ্লেট:

  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>

Answer 7

আপনার প্রয়োজন, *ngIfবা [ngClass]="{hide_element: item.hidden}"যেখানে CSS ক্লাস রয়েছে hide_elementতার উপর নির্ভর করে{ display: none; }

*ngIfআপনি যদি রাষ্ট্রের ভেরিয়েবলগুলি পরিবর্তন করছেন তবে সমস্যাগুলি সৃষ্টি করতে পারে *ngIf, সেই ক্ষেত্রে সিএসএস ব্যবহারের display: none;প্রয়োজন।

Answer 8

উপরে উপরে @inoabrian সমাধান আমার জন্য কাজ করেছে। আমি এমন পরিস্থিতিতে ছুঁড়েছি যেখানে আমি আমার পৃষ্ঠাটি রিফ্রেশ করব এবং আমার গোপন উপাদানটি আমার পৃষ্ঠায় আবার উপস্থিত হবে। এটি সমাধানের জন্য আমি যা করেছি তা এখানে।

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

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

Answer 9

আপনার সেটটাইমআউট ফাংশনে কেবল বাইন্ড (এটি) যুক্ত করুন এটি কাজ শুরু করবে

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>