角度模板，删除 div 和空格(div 被删除，但不删除空格)

Question

编辑：经过更多思考，我正在删除 TS 文件中不必要的元素，并使我的模板文件做更少的工作。

我已经查看了一些关于删除div 及其占用的空白的堆栈 o/f 线程。比如这个

div 是隐藏的，但是我的模板上仍然存在空白。

法典

<div *ngIf="array[i] !== null; else hideDivAndRemoveWhiteSpace">
  //business logic
</div>
<ng-template #hideDivAndRemoveWhiteSpace>
  //this template should be hidden
  <div class="hide-div"></div>
</ng-template>

.css

.hide-div {
  display: none;
}

Answer 1

您可以使用

<ng-container> </ng-container>

请参阅 Angular 关于 ng-container 的文档，Angular 如何不将其添加到 DOM 中

https://angular.io/guide/structural-directives#ng-container-to-the-rescue

另外，请参阅此答案：

vs

Answer 2

在谈论哪些空格？

在你的代码中，你为什么不只做：

<div *ngIf="array['data']">
    //business logic
</div>

没有"ele"和"ng模板">

Answer 3

您可以将此选项添加到组件装饰器preserveWhitespaces: false

这将从 DOM 中删除 elemnt

<div *ngIf="false" >
..
</div>

假 表示任何虚假值

根据条件添加类

风格.css

.d-none {
 display:none
}

模板

<div [ngClass]="{'d-none': true}">
...
</div>

或者您可以使用ng-container这样您就不需要用任何div elemnt 包装您的业务逻辑

<ng-container *ngIf="condition">
 //business logic
</ng-container>

如果condition true，则容器业务逻辑元素将可见，如果为 false，则不会向 DOM 呈现任何内容