将引导类动态添加到元素 Angular 2

【问题标题】：Dynamically Add Bootstrap Class to element Angular 2将引导类动态添加到元素 Angular 2
【发布时间】：2017-05-06 00:36:18
【问题描述】：

我有一个页面，其中包含一些我希望能够标记的输入框

       <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>

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

【问题讨论】：

标签： css twitter-bootstrap angular

【解决方案1】：

只需使用类绑定

[class.has-danger]="propWithValue"

propWithValue 的值应为 true 或 false 以添加或删除类。还有[ngClass] 用于更复杂的场景，比如添加多个类。

【讨论】：

这是最好的方法，因为我需要能够独立控制多个控件上的类。这会让我有多个变量需要管理吗？
如果你想拥有多个元素，每个元素都有自己的状态，那么是的，你需要多个变量。或者，您可以使用数组 - 取决于您的用例。但我不知道其他方法。要存储状态，您需要一个变量。
我认为具有“状态”属性的组件将是最干净的。唯一的问题是我会在同一页面上有多个
在同一页面上没关系。重要的是它何时位于同一个组件中。