Angular 2显示和隐藏一个元素

我在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，该元素也不会被隐藏。为什么?

当前回答

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

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库了吗?

2016-02-02 20:40:15

其他回答

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

对于3秒后更改的问题，可能是由于与setTimeout不兼容。你的页面中包含angular2-polyfills.js库了吗?

2016-02-02 20:40:15

我们可以通过使用下面的代码片段来实现。

角代码:

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

HTML模板:

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

2016-10-25 04:53:46

只需在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>

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

2019-05-28 13:49:58

在TS文件中

showMyContainer: boolean = false;

在HTML中

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

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

看看我的斯塔克布利茨

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

2021-06-30 12:09:01

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

否则，使用这个:

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

2016-12-07 14:34:23

Angular 2显示和隐藏一个元素

推荐文章

最新文章

标签