角度2显示和隐藏元素

Question

我有一个问题隐藏和显示一个元素取决于一个布尔变量在角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，元素也不会隐藏。为什么？

Answer 1

如果不想删除HTMLDOM元素，请使用*ngIf。

否则，请使用以下命令：

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

Answer 2

您应该使用*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);
  }
}

更新：当您在超时回调中时，您缺少对外部范围的引用。

所以添加. bind（this），就像我在上面添加的一样

问：编辑是一个全局变量。你在一个*ngFor循环中的方法是什么？-Blauhirn

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

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

Answer 3

根据您想要实现的目标，有两种选择：

>

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

可以使用ngIf control指令添加或删除元素。这与hidden指令不同，因为它不显示/隐藏元素，而是从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多边形填充。你的页面中有js库吗？