时间戳

首页 > 解决方案 > 为什么 *ngIf 不能在 Angular 中使用 ng-container

html - 为什么 *ngIf 不能在 Angular 中使用 ng-container

问题描述

我正在尝试在 *ngIf 的帮助下关闭单击关闭按钮时的引导警报框。

在 onClick (close) 中调用 isError=false。我能够将 isError 值记录为 false 但 ng-container 没有消失？这是我的代码

<div class="error-list">
  <ng-container *ngIf="isError">
    <ngb-alert type="danger" (click)="closeError()">{{errorMessage}}</ngb-alert>
  </ng-container>
  <div class="alert alert-warning alert-dismissible" role="alert">
    <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span
        aria-hidden="true">&times;</span></span>
    <strong>Warning!</strong> {{errorMessage}}.
  </div>

</div>

.error-list {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

::ng-deep .alert {
  margin-bottom: 0;
}

.ts 文件

 closeError(): void {

this.isError = false;
console.log("Message: ", this.isError);
}

标签： htmlcssangularbootstrap-4

解决方案

我尝试解决您的问题并且没有问题。这只是一个非常简化的示例：

https://stackblitz.com/edit/angular-r29kyu

根据我的理解，您也想用类隐藏 div alert alert-warning alert-dismissible。如果是这样，你也必须把它放在里面ng-container。

推荐阅读