Question

修改：经过更多的考虑，我正在删除TS文件中不必要的元素，并使我的模板文件的工作量减少。

我研究了一些有关删除div及其占用的空白的堆栈线程。如this one

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

哪个空格在徘徊？

在您的代码中，为什么不这样做：

ClientA <-RPC-> NodeA+CorDapp <-Public-> NodeB+CorDapp <-RPC-> ClientB

没有“ ele”和“ ng-template”

Answer 2

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

这将从dom中删除元素

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

false表示任何虚假的值

根据条件添加类

style.css

.d-none {
 display:none
}

模板

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

或者您可以使用ng-container，因此您不需要使用任何div元素来包装业务逻辑

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

如果condition为true，则容器业务逻辑元素为假（如果为false）将不显示任何内容

Answer 3

您可以使用<ng-container> </ng-container>

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

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

此外，请参见以下答案：

<ng-container> vs <template>

角度模板，删除div和空白（删除div，但不删除空白）

3 个答案: