Angular2 有没有办法动态设置 bootstrap col?
Angular2 is there a way to set bootstrap col dynamically?
是否可以使用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'
我会为此利用 NgClass
:
<div [ngClass]="{'col-xs-2': prototype?.valueType === 'Set', 'col-xs-3': 'prototype?.valueType !== 'Set''}">
使用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
是否可以使用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'
我会为此利用 NgClass
:
<div [ngClass]="{'col-xs-2': prototype?.valueType === 'Set', 'col-xs-3': 'prototype?.valueType !== 'Set''}">
使用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