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类。请将每个col元素排成一行。

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

stackblitz：https://stackblitz.com/edit/angular-krway8

在使用Bootstrap的模板中，如何将阵列分成两列？

2 个答案: