Angular 2显示和隐藏元素

小编典典

Angular 2显示和隐藏元素

all

我在隐藏和显示取决于 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，元素也不会隐藏。为什么？

阅读 161

2022-06-29

共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)

问：edited 是一个全局变量。您在 *ngFor 循环中的方法是什么？——布劳亨

答：我会将编辑添加为我正在迭代的对象的属性。

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

2022-06-29