Угловой 5, условие в столбце начальной загрузки html break

Question

В моем угловом 5 проекте мне нужно отобразить столбец, основанный на некоторых условиях, Я только что обновил загрузчик до версии 4, и теперь у меня возникла проблема с условным шаблоном.

В неправильной позиции отображаются столбцы с классом "ng-star-вставлен", может быть, в коде есть ошибки? Это пример:

<div class="row" *ngIf="selected.status !== null>
        <div class="col-sm-2 offset-10" *ngIf="+totalPayed < +selected.price">
            <button *ngIf="loggedUserService.checkSession()">
                <span class="btn-label">
                    <i class="material-icons">add</i> pay
                </span>
           </button>
        </div>
    </div>

Эта кнопка смещена:

И это исходный код отображаемой страницы:

Answer 1

ng-star-inserted будет добавлено в код при использовании анимации.

В качестве альтернативы вы можете использовать тег ng-container.

<ng-container *ngIf="loggedUserService.checkSession()">
   <button>
      <span class="btn-label">
           <i class="material-icons">add</i> pay
      </span>
   </button>
</ng-container>

ng-container используется для применения таких условий, как * ngIf, * ngFor без влияния на html dom.

<ng-container *ngIf="selected.status !== null">
   <div class="row">
      your code here
   </div>
</ng-container>