Angular 2 แสดงและซ่อนองค์ประกอบ

ฉันมีปัญหาในการซ่อนและแสดงองค์ประกอบโดยขึ้นอยู่กับตัวแปรบูลีนใน Angular 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 วินาทีแม้ว่าตัวแปรจะกลับมาเป็นเท็จองค์ประกอบจะไม่ซ่อน ทำไม?

คุณควรใช้ * 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);
  }
}

อัปเดต: คุณไม่มีการอ้างอิงถึงขอบเขตด้านนอกเมื่อคุณอยู่ในการโทรกลับหมดเวลา

ดังนั้นเพิ่ม. ผูก (นี้) เช่นฉันเพิ่มด้านบน

ถาม: แก้ไขเป็นตัวแปรส่วนกลาง อะไรคือแนวทางของคุณภายใน * ngFor-loop - Blauhirn

ตอบ: ฉันจะเพิ่มการแก้ไขเป็นคุณสมบัติให้กับวัตถุที่ทำซ้ำ

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

มีสองตัวเลือกขึ้นอยู่กับสิ่งที่คุณต้องการบรรลุ:

1. คุณสามารถใช้คำสั่งที่ซ่อนอยู่เพื่อแสดงหรือซ่อนองค์ประกอบ

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

2. คุณสามารถใช้คำสั่งควบคุม ngIf เพื่อเพิ่มหรือลบองค์ประกอบ สิ่งนี้แตกต่างจากคำสั่งที่ซ่อนอยู่เพราะมันไม่ได้แสดง / ซ่อนองค์ประกอบ แต่มันเพิ่ม / ลบออกจาก DOM คุณสามารถหลวมข้อมูลที่ไม่ได้บันทึกขององค์ประกอบ อาจเป็นตัวเลือกที่ดีกว่าสำหรับองค์ประกอบการแก้ไขที่ถูกยกเลิก

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

สำหรับคุณที่มีปัญหาการเปลี่ยนแปลงหลังจาก 3 วินาทีอาจเป็นเพราะความไม่เข้ากันกับ setTimeout คุณรวมไลบรารี angular2-polyfills.js ในหน้าของคุณหรือไม่?

เมื่อคุณไม่ต้องการลบ Html Dom-Element ให้ใช้ * 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);
  }
}

เราสามารถทำได้โดยใช้ข้อมูลโค้ดด้านล่าง ..

รหัสเชิงมุม:

 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>

ขึ้นอยู่กับความต้องการของคุณ*ngIfหรือ[ngClass]="{hide_element: item.hidden}"ที่คลาส CSS hide_elementอยู่{ display: none; }

*ngIfอาจทำให้เกิดปัญหาหากคุณกำลังเปลี่ยนตัวแปรสถานะ*ngIfกำลังลบในกรณีเหล่านั้นdisplay: none;จำเป็นต้องใช้ CSS

แก้ปัญหา @inoabrian ข้างต้นทำงานให้ฉัน ฉันพบสถานการณ์ที่ฉันจะรีเฟรชหน้าและองค์ประกอบที่ซ่อนของฉันจะปรากฏขึ้นอีกครั้งบนหน้าของฉัน นี่คือสิ่งที่ฉันทำเพื่อแก้ไข

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

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

เพียงเพิ่มการผูก (อันนี้)ในฟังก์ชั่น 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>