В шаблоне, который использует Bootstrap, как разделить массив на два столбца? - PullRequest
Новая
       2

В шаблоне, который использует Bootstrap, как разделить массив на два столбца?

0 голосов
/ 19 марта 2019

В угловом компоненте у меня есть массив значений. В связанном шаблоне я хочу отобразить эти значения в двух столбцах. Шаблон использует платформу 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>

Ответы [ 2 ]

1 голос
/ 20 марта 2019

Если вы хотите поместить a,c,e в первый столбец и используете Bootstrap, вы можете просто сделать это с помощью автоматического разрыва в сетке Bootstrap.

Только не разбивайтесь на row класс. Вместо этого поместите каждый элемент col в ряд. 

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

стекблиц: https://stackblitz.com/edit/angular-krway8

1 голос
/ 19 марта 2019

Возможно, вы захотите что-то вроде 

<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>
...