Question

我正在使用角度和引导程序。

<div class="row">
<div class="col-xs-9"> someText1 </div>
<div class="col-xs-3" *ngIf="somecondition"> someText2 </div>
</div>

someText1，someText2都取决于某些条件如果没有显示第二个div，我希望第一个div占据全宽。考虑到这种情况，由于我们的业务规则，someText1将是更长的文本。我用

实现了它

<div class="somecondition?col-xs-9:col-xs-12"> somevalue </div>

但这是否是实现这一目标的正确方法？是否有任何自助解决方案？可能是某种拉动或自动调整

Answer 1

我宁愿这样做：

<div [ngClass]="someCondition? 'col-xs-9' : 'col-xs-12'">somevalue</div>

或

<div [ngClass]=" {'col-xs-9' : someCondition, 'col-xs-12' : !someCondition}"> somevalue </div>

或者这个：

<div *ngIf="someCondition; then temp1; else temp2"> </div>

<ng-template #temp1>
  <div  class="col-xs-9">
     SomeText1 when someCondition = true
  </div>
</ng-template> 

<ng-template #temp2>
  <div class="col-xs-12">
     SomeText1 when someCondition = false
  </div>
  <div>SomeText2</div>
</ng-template>

<强> DEMO

如何根据文本长度/存在给出列宽

1 个答案: