Angular2 gibt es eine Möglichkeit, Bootstrap col dynamisch festzulegen?

Question

Ist es möglich, If statement zu verwenden, um die Spaltenbreite des div zu setzen? Ich habe verschiedene bekam div Elemente wie folgt aus:

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

Wie kann ich die col-xs-3 oben col-xs-2 beispielsweise ändern, wenn prototype?.valueType === 'Set'

Answer 1

Verwendung ngClass:

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

Siehe auch https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

Answer 2

ich NgClass dafür nutzen würde:

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