动态地将Bootstrap类添加到元素Angular 2

Question

我有一个页面，其中包含一些我希望能够标记为

的输入框

       <div class="form-group">
            <label class="d-block">Allowance Type</label>
            <div class="input-group">
                <input type="text" class="form-control width-150" [(ngModel)]="selectedPricingItem.allowanceTypeDescription" readonly>
                <span class="input-group-addon mg-batch-flag" (click)="flagItem('allowanceTypeDescription','Allowance Type')" data-toggle="modal" data-target="#auditDialog">
                     <i class="fa fa-fw fa-flag" aria-hidden="true">
                     </i>
                </span>
            </div>
        </div>

我在页面上有几次这种结构，我希望能够基于我拥有的click事件处理程序对它们进行引导类（has-danger）。在那个处理程序中，我只是填充了一个类的实例，我打算在此时提交给Web服务。是创建具有不同样式的组件的最佳方法，并使用* ngIf来隐藏/显示？

Answer 1

只需使用类绑定

[class.has-danger]="propWithValue"

其中propWithValue应具有值true或false以添加或删除该类。对于更复杂的场景，例如添加多个类，还有[ngClass]。