Angular2有没有办法动态设置bootstrap col?

时间:2016-04-12 07:59:39

标签: typescript angular ng-class

是否可以使用If statement设置div的列宽?我有这样的不同div元素:

    <div class="col-xs-3">
        <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
            <option *ngFor="#p of prototypes" [value]="p.selector">
                {{ p.selectorName }}
            </option>
        </select>
    </div>

    <div class="col-xs-1" *ngIf="prototype?.valueType === 'Set'">
       <p class="text-center">If</p>
   </div>

如何在col-xs-3

之后将上面的col-xs-2更改为prototype?.valueType === 'Set'

2 个答案:

答案 0 :(得分:4)

使用ngClass

<div [ngClass]="{
    'col-xs-3': prototype?.valueType !== 'Set',
    'col-xs-2': prototype?.valueType === 'Set'}"> 

另见https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

答案 1 :(得分:2)

我会利用NgClass

<div [ngClass]="{'col-xs-2': prototype?.valueType === 'Set', 'col-xs-3': 'prototype?.valueType !== 'Set''}">