Применить стиль bootstrap grid для HTML div

#html #css #angular

#HTML #css #угловой

Вопрос:

В моем приложении angular я пытаюсь применить стиль bootstrap grid на основе количества элементов в массиве. Например:

Если длина массива в цикле for равна 5. Я хочу установить первый и второй элемент в строке, 3-й и 4-й в строке с col-md-6 или шириной 50. И я хочу установить для 5-го элемента полную ширину 100%.

Если длина массива в цикле for равна 2, я хочу установить первый и второй элемент в строке шириной 50%. Если существует только 1 элемент, я хочу установить его на полную ширину. Как я могу этого добиться?

HTML

 <div class="col-md-12">
<div class="row">
<div class="test" *ngFor="let item of array">
<label>test</label>
</div>
</div>
</div>
  

Ответ №1:

используйте ngClass

 [ngClass]="{'col-6': array.length === 5, 'col-12': array.length === 4}"
  

попробуйте вот так