只需在setTimeout函数中添加bind(this)，它就会开始工作

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>

To

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

根据你想要达到的目标，有两种选择:

You can use the hidden directive to show or hide an element <div [hidden]="!edited" class="alert alert-success box-msg" role="alert"> <strong>List Saved!</strong> Your changes has been saved. </div> You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled. <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库了吗?

你应该使用*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: edited是一个全局变量。在* ngfor循环中你的方法是什么?——Blauhirn 答:我会将edit作为一个属性添加到我正在迭代的对象中。

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

@inoabrian上面的解决方案对我有用。我遇到了这样一种情况:刷新页面时，隐藏的元素会重新出现在页面上。下面是我解决这个问题的方法。

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

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

只需在setTimeout函数中添加bind(this)，它就会开始工作

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>

To

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

在TS文件中

showMyContainer: boolean = false;

在HTML中

<button (click)="showMyContainer=!showMyContainer">Show/Hide</button>

<div *ngIf="showMyContainer">
     your code
</div>

看看我的斯塔克布利茨

很高兴听到有人得到了帮助。