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

您应该使用* 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);
  }
}

更新：在超时回调内部时，您缺少对外部作用域的引用。

所以像我在上面添加的那样添加.bind（this）

问：编辑是一个全局变量。您在* ngFor循环中的处理方式是什么？–布劳恩

答：我会将编辑添加为要迭代的对象的属性。

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

有两种选择，取决于您要实现的目标：

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

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

2. 您可以使用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库？

当您不关心删除HTML Dom元素时，请使用* ngIf。

否则，使用此：

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

为了让子组件显示我正在使用 *ngif="selectedState == 1"

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

它对我有用..正确地加载子组件，并且在使用此子组件后，隐藏和取消隐藏子组件没有未定义。

这是指令的好用例。这样的事情令人惊讶地有用。

@Directive({selector: '[removeAfter]'}) export class RemoveAfter {
  constructor(readonly element: ElementRef<HTMLElement>) { }

  /**
   * Removes the attributed element after the specified number of milliseconds. 
   * Defaults to (1000)
   */
  @Input() removeAfter = 1000;


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

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

角度代码：

 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>

根据您的需求*ngIf或[ngClass]="{hide_element: item.hidden}"CSS类的hide_element位置{ display: none; }

*ngIf如果您要更改状态变量，*ngIf则可能导致问题，在这种情况下，display: none;需要使用CSS 。

上面的@inoabrian解决方案为我工作。我遇到了这样的情况，我将刷新页面，而我的隐藏元素将重新出现在页面上。这是我为解决此问题所做的工作。

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

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

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