Angular 5，html中断引导列中的条件

Question

在我的angular 5项目中，我必须根据一些条件显示一些列，我刚刚将bootstrap更新到v4，现在我有一些条件模板的问题。

有一些带有"ng-star-inserted“类的列显示在错误的位置，可能代码中有一些错误？这是一个示例：

<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用于在不影响html dom的情况下应用*ngIf、*ngFor等条件。

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