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


当前回答

在TS文件中

showMyContainer: boolean = false;

在HTML中

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

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

看看我的斯塔克布利茨

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

其他回答

对于子组件,我使用了*ngif="selectedState == 1"

我使用[hidden]="selectedState! "= 1”

这对我很管用。正确地加载子组件以及在隐藏和取消隐藏子组件之后没有定义。

根据你的需要,*ngIf或[ngClass]="{hide_element: item. "其中CSS类hide_element为{display: none;}

*ngIf会导致问题,如果你正在改变状态变量*ngIf正在删除,在这些情况下使用CSS display: none;是必需的。

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

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

角代码:

 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>

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

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

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