Question

在3格的行中创建动态单选按钮列表。我正在尝试从组件列表中的单选按钮进行三列布局。我将重复MajorExposureItems数组，并获取每个名称作为单选按钮组的选项。我遇到的问题是如何嵌套重复序列以将数组分为三个列表，然后将其放入3列。

我尝试过这种闪电战：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

有几件事...

首先，我将bootstrap css文件添加到index.html
接下来将' dynamic '单选按钮分配到3个div中，我们可以利用CSS的column-count属性；
在分发' 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>

使用* ngFor填充3格格式的单选列表

1 个答案: