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 секунды, даже если переменная возвращается к false, элемент не скрывается. Почему?

Ответы

Ответ 1

Вы должны использовать директиву * 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(this), как я добавил выше

Q: отредактирована глобальная переменная. Каким будет ваш подход в цикле * 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);
  }
}

Ответ 2

В зависимости от того, что вы хотите достичь, есть два варианта:

Вы можете использовать скрытую директиву для отображения или скрытия элемента
```
<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
  <strong>List Saved!</strong> Your changes has been saved.
</div>
```
Вы можете использовать директиву 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 библиотеку?

Ответ 3

Если вам не нужно удалять элемент HTML-элемента, используйте * ngIf.

В противном случае используйте это:

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

Ответ 4

Для дочернего компонента, который я показывал, я использовал *ngif="selectedState == 1"

Вместо этого я использовал [hidden]="selectedState!=1"

Это сработало для меня. Загрузив дочерний компонент правильно и после того, как скрытый и скрывающий дочерний компонент не был undefined после использования этого.

Ответ 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);
  }
}

Ответ 6

Мы можем сделать это, используя нижеприведенный код snipet..

Angular Код:

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

Шаблон HTML:

  Enter text to hide or show item in bellow: 
  <input type="text" [(ngModel)]="toggoleShowHide">
  <br>
  Toggle Show/hide:
  <div [style.visibility]="toggoleShowHide">   
     Final Release Angular 2!
  </div>

Ответ 7

В зависимости от ваших потребностей *ngIf или [ngClass]="{hide_element: item.hidden}", где класс CSS hide_element равен { display: none; }

*ngIf может вызывать проблемы, если вы меняете переменные состояния *ngIf удаляется, в тех случаях, когда требуется использовать CSS display: none;.

Ответ 8

inoabrian ответ правильный. Ваш не работал, потому что дисплей не имеет "нормального" значения. Если вы установите его в "initial", вы увидите некоторые результаты.

Ответ 9

Решение @inoabrian выше работало для меня. Я столкнулся с ситуацией, когда я обновлял свою страницу, и мой скрытый элемент снова появлялся на моей странице. Вот что я сделал, чтобы решить эту проблему.

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

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

Ответ 10

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