在使用 Bootstrap 的模板中，如何将数组拆分为两列？

Question

在 Angular 组件中，我有一个值数组。在相关模板中，我想在两列中显示这些值。该模板使用 Bootstrap 框架。

由于 Angular 模板需要循环中的开始和结束标记，因此您无法打印 </div><div class="row"> 来为您提供精确的换行符。将数组拆分为两列的正确方法是什么？

一个伪代码示例（这不起作用）：

public foobars = ['a', 'b', 'c', 'd', 'e'];

----

<ng-container *ngFor="let foo of foobars; let i = index">
    <ng-container *ngIf="i % 2 === 0; else secondColumn">
        <div class="row">
            <div class="col-md-6">{{foo}}</div>
        </div>
    </ng-container>
    <ng-template #secondColumn>
        <div class="col-md-6">{{foo}}</div>
    </ng-template>
</ng-container>

Answer 1

你可能想要类似的东西

<ng-container *ngFor="let foo of foobars; let i = index
  <div *ngIf="i % 2 === 0; then column1 else column2"></div>

  <div class="row">
    <div class="col-lg-6">
      <ng-template #column1>
        <!-- column 1, here put the col-* class -->
      </ng-template>
    </div>
    <div class="col-lg-6">
      <ng-template #column2>
        <!-- column 2, here put the col-* class -->
      </ng-template>
    </div>
  </div>      
</ng-container>

Answer 2

如果您想将 a,c,e 放在第一列并且您正在使用 Bootstrap，您可以使用 Bootstrap 网格系统中的自动中断来完成。

只是不要在 row class 之前中断。改为将每个 col 元素放在一行中。

<div class="row">
  <div *ngFor="let foo of foobars" class="col-6">{{foo}}</div>
</div>

堆栈闪电战：https://stackblitz.com/edit/angular-krway8

在使用 Bootstrap 的模板中，如何将数组拆分为两列？

In a template that uses Bootstrap, how do you split an array into two columns?

angular-template

angular