Angular 2显示和隐藏元素

Posted 2023-03-13

【中文标题】Angular 2显示和隐藏元素

【英文标题】：Angular 2 Show and Hide an element

【发布时间】：2016-05-11 19:42:34

【问题描述】：

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

【参考方案1】：

在 TS 文件中

showMyContainer: boolean = false;

在 HTML 中

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

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

见我的stackblitz

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

【参考方案2】：

这是Angular Directive 的一个很好的用例。像这样的东西非常有用。

@Directive(
  selector: '[removeAfter]'
)
export class RemoveAfter 
  constructor(readonly element: ElementRef<htmlElement>)  
 
  /**
   * Removes the attributed element after the specified number of milliseconds.
   */
  @Input() removeAfter: number;

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

用法：

<div [removeAfter]="3000">Removed after 3 seconds</div>

【讨论】：

我喜欢这个想法，但这会完全删除元素。我将其更改为隐藏，因此您可以重复使用它，但这并没有隐藏元素可能是因为ngIf 是true。有没有办法将控制它的父变量设置为false？

你不能只添加一个隐藏类或其他东西而不是调用remove吗？这种技术非常通用。

我认为问题在于ngIf 更多的是因为元素是否在 DOM 中。我想要的是：<div [hidden]="messages" [removeAfter]=3000>... 如果有消息，我会在其中显示/隐藏消息，然后在 3 秒后删除消息，这样用户就不必关闭框了。我在上面添加了您的指令并将其切换为执行hide()，但在显示消息时不会调用它。如何让它在事件中被调用？ @Output() 和 EventEmitter?

【参考方案3】：

我们可以使用下面的代码 sn-p..

角度代码：

 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>

【参考方案4】：

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

【参考方案5】：

上面的@inoabrian 解决方案对我有用。我遇到了一种情况，我会刷新我的页面，而我的隐藏元素会重新出现在我的页面上。这是我为解决它所做的。

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

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

【参考方案6】：

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

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

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

【参考方案7】：

你应该使用 *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)

Q：edited 是一个全局变量。您在 *ngFor 循环中的方法是什么？ ——布劳亨

A：我会将编辑添加为我正在迭代的对象的属性。

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

【讨论】：

edited 是一个全局变量。您在*ngFor-loop 中的方法是什么？

Edited 不是全局变量，它属于组件。我会在上面添加答案。

如何从服务全局访问定时器？

ngif 导致某些角度材质组件无法初始化和正常工作，例如 mat-paginator。我认为在某些情况下使用 [hidden] 是更好的选择。

【参考方案8】：

如果您不关心删除 Html Dom-Element，请使用 *ngIf。

否则，使用这个：

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

【参考方案9】：

根据您想要实现的目标，有两种选择：

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

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

【讨论】：

[hidden]="edited" 好像没有任何效果...？

如果您有隐藏问题，请在您的全局 css 中关注***.com/a/35578093/873282:[hidden] display: none !important; 的回答。

【参考方案10】：

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

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