typescript - Angular 2 显示和隐藏元素

Question

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

这是显示和隐藏 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

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

1. 您可以使用 hidden 指令来显示或隐藏元素

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

2. 您可以使用 ngIf 控制指令来添加或删除元素。这与 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-polyfills.js 库？