Кутовий 2 Показати та приховати елемент

У мене є проблема приховати і показати елемент залежно від булевої змінної у Angular 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);
  }
}

Елемент прихований, коли запускається функція saveTodos, елемент відображається, але через 3 секунди, навіть якщо змінна повертається до помилкової, елемент не ховається. Чому?

Вам слід використовувати * ngIf Директиву

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

Оновлення: під час зворотного дзвінка Timeout відсутнє посилання на зовнішню область застосування.

тому додайте .bind (це), як я додав вище

Питання: відредагований - це глобальна змінна. Яким би був ваш підхід у циклі * ngFor? - Блахірн

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

Є два варіанти залежно від того, чого ви хочете досягти:

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}"де hide_elementзнаходиться клас CSS{ display: none; }

*ngIfможе викликати проблеми, якщо ви змінюєте змінні стану, *ngIfце видалення, у тих випадках, коли потрібно використовувати CSS display: none;.

Розчин @inoabrian вище працював для мене. Я зіткнувся з ситуацією, коли я оновив би свою сторінку, і мій прихований елемент знову з’явиться на моїй сторінці. Ось що я зробив, щоб вирішити це.

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

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

Просто додайте bind (це) у свою функцію 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>