Использование * ngFor для заполнения списка радиостанций, отформатированных в 3 деления

Question

Создание динамического списка переключателей в строке с 3 делителями. Я пытаюсь сделать трехколоночную раскладку переключателей из списка на компоненте. Я повторю над массивом MajorExposureItems и возьму каждое имя в качестве опции для группы переключателей. Проблема, с которой я сталкиваюсь, заключается в том, как вложить повтор для разделения массива на три списка, которые я затем могу поместить в три столбца.

Я пробовал этот блиц: https://stackblitz.com/edit/angular-cudyel

onItemChange(item) {
  console.log("onItemChange(): ", item)
}

MajorExposureItems = [{
  id: 1,
  name: 'Camp',
  value: 'CAMP'
}, {
  id: 2,
  name: 'Child Day Care',
  value: 'CHILDDAYCARE'
}, {
  id: 3,
  name: 'Event Space',
  value: 'EVENTSPACE'
}, {
  id: 4,
  name: 'Festival / Fair',
  value: 'FESTIVAL'
}, {
  id: 5,
  name: 'Hospital',
  value: 'HOSPITAL'
}, {
  id: 6,
  name: 'Hotel / Motel',
  value: 'HOTEL'
}, {
  id: 7,
  name: 'Long-term care / Nursing home',
  value: 'LONGTERMCARE'
}, {
  id: 8,
  name: 'Office / Indoor workplace',
  value: 'OFFICE'
}, {
  id: 9,
  name: 'Other healthcare facility',
  value: 'OTHERHEALTHCARE'
}, {
  id: 10,
  name: 'Prison / Jail',
  value: 'PRISON'
}, {
  id: 11,
  name: 'Private Home / Residence',
  value: 'RESIDENCE'
}, {
  id: 12,
  name: 'Religious Facility',
  value: 'RELIGIOUS'
}, {
  id: 13,
  name: 'Restaurant',
  value: 'RESTAURANT'
}, {
  id: 14,
  name: 'School / College / University',
  value: 'SCHOOL'
}, {
  id: 15,
  name: 'Shelter / Group Home',
  value: 'SHELTER'
}, {
  id: 16,
  name: 'Ship / Boat',
  value: 'BOAT'
}, {
  id: 17,
  name: 'Unknown',
  value: 'UNKNOWN'
}, {
  id: 18,
  name: 'OTHER DESCRIPTION',
  value: 'OTHERDESCRIPTION'
}]

И в моем html:

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div class="columns">
  <div class="row">
    <div class="col-md-4">
      <div class="column" *ngFor="let item of MajorExposureItems; let i = index">
        <div class="form-check">
          <input class="form-check-input" type="radio" [(ngModel)]="MajorExposureModel" #majorExposureModel="ngModel" id="MajorExposure{{item.id}}" value="{{item.value}}" (change)="onItemChange(item)" /> {{item.name}}
        </div>
      </div>
   </div>
</div>

Я могу только понять, как отформатировать этот макет в одном столбце. Я хотел бы равномерно распределить это по 3 колонкам. Есть предложения?

Answer 1

Сделал несколько вещей ...

• Сначала я добавил файл начальной загрузки css в index.html
• рядом с дистрибутивом ' dynamic 'переключатели на 3 делителя, мы можем использовать свойство column-count CSS;
• в то время как для распространения опций ' fixed ' a, b, c ... мы можем использовать класс начальной загрузки col-md-4;

релевантный HTML :

<div  >
    <div class="myColumns" >
        <div class="form-check" *ngFor="let item of MajorExposureItems; let i = index">
            <input  
                class="form-check-input" 
                type="radio" 
                [(ngModel)]="MajorExposureModel" 
                #majorExposureModel="ngModel"
                id="MajorExposure{{item.id}}"
                value="{{item.value}}" 
                (change)="onItemChange(item)"/>

                {{item.name}}
    </div>
  </div>
<hr/>
  <div class="row">
    <div class="col-4 col-md-4">a </div>
    <div class="col-4 col-md-4">b</div>
    <div class="col-4 col-md-4">c</div>
  </div>
</div>

релевантно CSS :

.myColumns{-webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;}

завершено рабочая демонстрация здесь