Angular 2显示并隐藏一个元素

我有一个隐藏的问题，并显示一个依赖于Angular 2中的布尔variables的元素。

这是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> 

该variables是“编辑”，它存储在我的组件：

 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秒后，即使variables返回为false，元素也不会隐藏。 为什么？

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

---

更新：当您在超时callback中时，您缺less对外部作用域的引用。

所以添加.bind（this）就像我在上面添加

问：编辑是一个全局variables。 在* ngFor-loop中你会采取什么方法？ – 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 2

有两种select，取决于你想达到什么：

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

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

2. 您可以使用ngIf控制指令来添加或删除元素。 这是不同的隐藏的指令，因为它不显示/隐藏的元素，但它添加/从DOM删除。 您可以释放元素未保存的数据。 对于被取消的编辑组件来说，这可能是更好的select。

    <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库吗？

Answer 3

当你不关心移除Html Dom-Element时，使用* ngIf。

否则，使用这个：

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

Answer 4

对于要显示的子组件，我正在使用*ngif="selectedState == 1"

而不是我用[hidden]="selectedState!=1"

它为我工作..正确加载子组件后隐藏和取消隐藏子组件未使用后，这是不明确的。

Answer 5

我们可以通过使用下面的代码snipet ..

Angular Code：

  export class AppComponent { toggoleShowHide:string ="visible"; } 

HTML模板：

  Enter text to hide or show item in bellow: <input type="text" [(ngModel)]="toggoleShowHide"> <br> Toggle Show/hide: <div [style.visibility]="toggoleShowHide"> Final Release Angular 2! </div> 

Answer 6

根据你的需要， *ngIf或[ngClass]="{hide_element: item.hidden}"其中CSS class hide_element是{ display: none; } { display: none; }

*ngIf可能会导致问题，如果你改变状态variables*ngIf是删除，在这些情况下使用CSS display: none; 是必须的。

Answer 7

inoabrian的答案是正确的。 你的不工作，因为显示没有“正常”的价值。 如果你把它设置为“初始”，你应该看到一些结果。

Answer 8

这是指令的一个很好的用例。 这样的事情是惊人的有用的。

 @Directive({selector: '[removeAfter]'}) export class RemoveAfter { @Input() removeAfter: number; constructor(readonly element: ElementRef) { } ngOnInit() { setTimeout(() => { this.element.nativeElement.remove(); }, this.removeAfter); } }