Angular 2 Hiển thị và ẩn một phần tử

Tôi đang gặp vấn đề khi ẩn và hiển thị một phần tử tùy thuộc vào biến boolean trong Angular 2.

đây là mã để div hiển thị và ẩn:

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

biến được "chỉnh sửa" và nó được lưu trong thành phần của tôi:

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

Phần tử bị ẩn, khi hàm saveTodos khởi động, phần tử được hiển thị, nhưng sau 3 giây, ngay cả khi biến trở lại là false, phần tử không ẩn. Tại sao?

Bạn nên sử dụng * ng If 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);
  }
}

Cập nhật: bạn đang thiếu tham chiếu đến phạm vi bên ngoài khi bạn ở trong cuộc gọi lại Hết giờ.

vì vậy hãy thêm .bind (cái này) như tôi đã thêm ở trên

Q: chỉnh sửa là một biến toàn cục. Cách tiếp cận của bạn trong vòng * ngFor-loop là gì? - Blauhirn

Trả lời: Tôi sẽ thêm chỉnh sửa làm tài sản cho đối tượng tôi đang lặp lại.

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

Có hai lựa chọn tùy thuộc vào những gì bạn muốn đạt được:

1. Bạn có thể sử dụng chỉ thị ẩn để hiển thị hoặc ẩn một phần tử

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

2. Bạn có thể sử dụng lệnh ng If control để thêm hoặc xóa phần tử. Điều này khác với chỉ thị ẩn vì nó không hiển thị / ẩn phần tử, nhưng nó thêm / xóa khỏi DOM. Bạn có thể mất dữ liệu chưa được lưu của phần tử. Nó có thể là sự lựa chọn tốt hơn cho một thành phần chỉnh sửa bị hủy bỏ.

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

Đối với bạn vấn đề thay đổi sau 3 giây, có thể là do không tương thích với setTimeout. Bạn đã bao gồm thư viện angular2-polyfills.js trong trang của mình chưa?

Khi bạn không quan tâm đến việc xóa Phần tử Dom Html, hãy sử dụng * ng If.

Nếu không, sử dụng này:

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

Đối với thành phần con cho thấy tôi đang sử dụng *ngif="selectedState == 1"

Thay vào đó tôi đã sử dụng [hidden]="selectedState!=1"

Nó hoạt động với tôi .. tải thành phần con đúng cách và sau khi ẩn và bỏ ẩn thành phần con không được xác định sau khi sử dụng.

Đây là một trường hợp sử dụng tốt cho một chỉ thị. Một cái gì đó như thế này là hữu ích đáng ngạc nhiên.

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

Chúng tôi có thể làm điều đó bằng cách sử dụng đoạn mã dưới đây ..

Mã góc:

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

Mẫu 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>

Tùy thuộc vào nhu cầu của bạn, *ngIfhoặc [ngClass]="{hide_element: item.hidden}"nơi lớp CSS hide_elementlà{ display: none; }

*ngIfcó thể gây ra sự cố nếu bạn đang thay đổi các biến trạng thái *ngIf, trong những trường hợp đó sử dụng CSSdisplay: none; là bắt buộc.

@inoabrian giải pháp trên làm việc cho tôi. Tôi gặp phải tình huống tôi sẽ làm mới trang của mình và yếu tố ẩn của tôi sẽ xuất hiện lại trên trang của tôi. Đây là những gì tôi đã làm để giải quyết nó.

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

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

Chỉ cần thêm liên kết (cái này) trong chức năng setTimeout của bạn, nó sẽ bắt đầu hoạt động

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

và trong thay đổi 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>

Đến

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