Угловой шаблон, удалить div и пробел (div удален, но не пробел) - PullRequest
Новая
       20

Угловой шаблон, удалить div и пробел (div удален, но не пробел)

0 голосов
/ 28 марта 2019

Редактировать: После долгих раздумий я удаляю ненужный элемент в файле TS и заставляю мой файл шаблона выполнять меньше работы.

Я просмотрел несколько стеков o /F темы об удалении div и пробел, который он занимает.Например, this

Элемент 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;
}

Ответы [ 3 ]

0 голосов
/ 28 марта 2019

вы можете добавить эту опцию в компонентный декоратор preserveWhitespaces: false

это удалит элемент из dom 

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

false означает любое ложное значение

добавить базу классов на условиях

style.css 

.d-none {
 display:none
}

template 

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

или вы можете использовать ng-container, чтобы вы не делалинужно обернуть вашу бизнес-логику любым div-элементом 

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

, если condition true, элементы бизнес-логики контейнера будут видны, если значение false, ничего не будет отображаться в dom

0 голосов
/ 28 марта 2019

вы можете использовать <ng-container> </ng-container>

См. Документацию Angular о ng-container, как Angular не добавляет его в DOM

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

Также смотрите этот ответ:

против

0 голосов
/ 28 марта 2019

О каких пробелах говорят?

В вашем коде, почему бы вам просто не сделать: 

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

без "ele" и "ng-template"

...