Angular 使用*ngFor填充跨3个div格式化的无线电列表

在包含3个div的行中创建动态单选按钮列表。我试图从组件上的列表中创建单选按钮的三列布局。我将在MajoreExposureItems数组上重复，并获取每个名称作为单选按钮组的选项。我遇到的问题是如何嵌套repeat，将数组拆分为三个列表，然后将它们放入3列中

我尝试过这场闪电战：

在我的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>

开始编辑以查看发生的奇迹：）

{{item.name}

我只知道如何在一列中设置此布局的格式。我想平均分配到一个3列布局。有什么建议吗？

做了几件事

• 首先，我将引导css文件添加到index.html
• 接下来将“动态”单选按钮分配到3个div中，我们可以利用CSS的

  列计数

  属性
• 而分配“固定”选项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>

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

完成

做了几件事

• 首先，我将引导css文件添加到index.html
• 接下来将“动态”单选按钮分配到3个div中，我们可以利用CSS的

  列计数

  属性
• 而分配“固定”选项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>

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

---

完成

您的bootsrap样式在哪里？也许这就是为什么你看不清楚你有没有尝试过使用css样式来实现布局？你的bootsrap样式在哪里？也许这就是为什么你看不太清楚你有没有尝试过使用css样式来实现布局？