Question

我想根据数组中的项目数更改像col-md-12这样的CSS类。我正在将项目推送到数组。

例如，当数组中有一个项目时，该类必须为col-md-12，但如果有更多项目，则该类必须为col-md-6。类col-md-6应该有两列。

<div class="row footer" *ngIf="model.component.length!=undefined">
    <div class="col-md-{{getNoOfCols(model.component.length)}}" *ngFor="let item of model.component" style="margin-top:-25px;">
        <all-component [model]="item" (Click1)="onComponentClick($event)" [selectedId]="targetBuilderId"></all-component>
    </div>
</div>

Answer 1

你可以ng-class

示例：

ng-class="{
   'col-md-12' : (getNoOfCols(model.component.length) === 1),
   'col-md-6' : (getNoOfCols(model.component.length) > 1)
}"

Answer 2

您可以使用ngIf根据数组长度显示div

<div class="row footer" *ngIf="model.component !=undefined">
    <div *ngIf="model.component.length < 2; else colSix">
        <div class="col-md-12">Code for col-md-12</div>
    </div>
    <ng-template #colSix>
        <div class="col-md-6">
        <div class="col-md-6">
    </ng-template>    
</div>

Answer 3

尽量避免在模板中调用函数并使用ngClass在类之间切换

 import {Component, OnInit} from '@angular/core';

  @Component({
  selector: 'sample-app',
  template: `
    <div class="row footer">
            <div *ngFor="let item of arr" 
            [ngClass]='{"col-md-12": arr.length == 1, "col-md-6": arr.length > 1}'
            >
            {{item}} hello
            </div>
     </div>
  `
  })
  export class AppComponent implements OnInit{
  arr: any[];

  ngOnInit() {

    this.arr = ['item1', 'item2', 'item3'];
  }
  }

如何根据JavaScript数组中的项数更改列的CSS类？

3 个答案: