我在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，该元素也不会被隐藏。为什么?
你应该使用*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);
}
}
