Angular 2 显示和隐藏元素 [英] Angular 2 Show and Hide an element

问题描述

我在根据 Angular 2 中的布尔变量隐藏和显示元素时遇到问题.

这是div显示和隐藏的代码:

变量被编辑"并存储在我的组件中:

导出类 AppComponent 实现 OnInit{(...)公开编辑=假；(...)saveTodos(): void {//显示框消息this.edited = true;//等待3秒并隐藏设置超时(功能(){this.edited = false;console.log(this.edited);}, 3000);}}

元素被隐藏，当saveTodos函数启动时，元素被显示，但3秒后，即使变量返回为false，元素也不会隐藏.为什么?

解决方案

你应该使用 *ngIf 指令

<strong>列表已保存！</strong>您的更改已保存.
导出类 AppComponent 实现 OnInit{(...)公开编辑=假；(...)saveTodos(): void {//显示框消息this.edited = true;//等待3秒并隐藏设置超时(功能(){this.edited = false;console.log(this.edited);}.bind(this), 3000);}}

---

更新:当您在超时回调中时，您缺少对外部作用域的引用.

所以像我在上面添加的那样添加 .bind(this)

<块引用>

Q:edited 是一个全局变量.您在 *ngFor 循环中的方法是什么?– 布劳恩

A:我会将编辑作为属性添加到我正在迭代的对象中.

<strong>列表已保存！</strong>您的更改已保存.
导出类 AppComponent 实现 OnInit{公共列表对象 = [{名称:'对象 - 1'，假},{名称:'obj - 2'，假},{名称:'obj - 2'，假}];saveTodos(): void {//显示框消息this.edited = true;//等待3秒并隐藏设置超时(功能(){this.edited = false;console.log(this.edited);}.bind(this), 3000);}}

I'm having a problem hiding and showing an element depending of a boolean variable in Angular 2.

this is the code for the div to show and hide:

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

the variable is "edited" and it's stored in my component:

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

The element is hidden, when saveTodos function starts, the element is shown, but after 3 seconds, even if the variable come back to be false, the element does not hide. Why?

解决方案

You should use the *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);
  }
}

---

Update: you are missing the reference to the outer scope when you are inside the Timeout callback.

so add the .bind(this) like I added Above

Q : edited is a global variable. What would be your approach within a *ngFor-loop? – Blauhirn

A : I would add edit as a property to the object I am iterating over.

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

这篇关于Angular 2 显示和隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！