Лучший способ зациклить угловые 4 с колонками начальной загрузки?

Question

Я хочу зациклить свой список в столбцах начальной загрузки.

1. В первой строке я хотел бы показать три столбца
2. Во второй строке я хотел бы показать две колонки
3. В третьей строке:Я хотел бы показать только один столбец

Код ниже.

<div *ngFor="let watch of List;let i = index;" >  
    <div [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
         style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
    </div>
    <div>{{watch.value}}</div>
</div>

Он отображает каждый столбец в одной строке.Не показывается как три, два и один.

Answer 1

"Если мы определим строку перед ng, то все столбцы отображаются в одной строке."

Нет, если вы добавите [ngClass] к тому же элементу, который повторяется:

<div class="row">  
    <div *ngFor="let watch of List;let i = index;" [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
         style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
    </div>
    <div>{{watch.value}}</div>
</div>

Вам также не нужны эти поля rowType, вы можете сделать что-то вроде этого:

[ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': (index / 3 < 1)

Answer 2

Может быть div с {{watch.value}} должно быть внутри <div [ngClass]=" как это?

            <div *ngFor="let watch of List;let i = index;" [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
                 style="text-align:center; background-color:rgb(0, 183, 255);">
                 <div>{{watch.name}}<div>
                 <div>{{watch.value}}</div>
            </div>

Answer 3

Здравствуйте, вам не хватает класса "row" в вас * ngFor-div:

<div class="row" *ngFor="let watch of List;let i = index;" >  
   <div [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
     style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
</div>
   <div>{{watch.value}}</div>
</div>