Question

我在隐藏和显示元素时遇到问题，这取决于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，元素也不会隐藏。为什么呢？

Answer 1

根据您的目标，有两种选择：

您可以使用隐藏指令来显示或隐藏元素

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

您可以使用ngIf控制指令添加或删除元素。这与hidden指令不同，因为它不显示/隐藏元素，但是它从DOM中添加/删除。您可以丢失元素的未保存数据。对于被取消的编辑组件，它可能是更好的选择。
```
<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 2

您应该使用* 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）就像我添加了Above

问：编辑是一个全局变量。在* 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 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

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

@Directive({selector: '[removeAfter]'}) export class RemoveAfter {

  @Input() removeAfter: number;

  constructor(readonly element: ElementRef) { }

  ngOnInit() {
    setTimeout(() => {
      this.element.nativeElement.remove();
    }, this.removeAfter);
  }
}

Answer 6

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

如果您要更改状态变量*ngIf正在删除，

*ngIf会导致问题，在这些情况下，需要使用CSS display: none;。

Answer 7

我们可以使用下面的代码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 8

上面的@inoabrian解决方案为我工作。我遇到了一个情况，我会刷新我的页面，我的隐藏元素将重新出现在我的页面上。这就是我解决它的方法。

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

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

Answer 9

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

Answer 10

在 TS 文件中

showMyContainer: boolean = false;

在 HTML 中

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

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

查看我的stackblitz

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

Angular 2显示和隐藏元素

10 个答案: