使用 ngFor 和 ngIf 在数组中迭代两种不同的方式 - Angular

Question

I am trying to get this array (which will be at the end coming from an API to generate real components):

salesArray = [0, 1, 2, 3, 4, 5, 6, 7];

to allow me to generate a component several times in Bootstrap rows and cols.

The idea is to offer two different views the user can switch with a button. This part is not directly linked to the problem.

First view = a Bootstrap row with 3 col-4, so the result should be:

0 - 1 - 2

3 - 4 - 5

6 - 7 - empty col

Second view = a Bootstrap row with 2 col-4 (not col-6 because the element which will be further called from the API has to stay the same size), so the result should be:

0 - 1

2 - 3

4 - 5

6 - 7

Here is my code for now:

<div class="container-fluid">
  <div class="row">
  <div class="col-9">
        <ng-container *ngIf="screenResolution == 'Desktop'">
            <ng-container *ngFor="let item of salesArray; let i = index;">
                <div class="row" *ngIf="i%3 === 0">
                    <ng-container *ngFor="let item of salesArray; let i = index;">
                    <div class="col-4">
                        {{ i }}
                        <!-- <srp-sale-block [dataView]=dataToDisplay></srp-sale-block> -->
                    </div>
                </ng-container>
                </div>
            </ng-container>
        </ng-container>
  </div>
  </div>
</div>

For now, I manage to generate a row every three components, but after this the loop iterate again through all the array, and I don't get how to show only 2 or 3 numbers by row, and then keep going with the next series. So 0 - 1 - 2 in the first row, then 3 - 4 - 5 in the second...

Thanks.

Answer 1

You can probably get away with just using [ngClass] directive to apply a bootstrap column class based on the resolution. If the resolution is Desktop apply class col-4 to give you 3 columns , else apply class col-6 to give you 2 columns.

sales.component.html

<div class="row">
  <ng-container *ngFor="let item of salesArray">
    <div [ngClass]="
        { 'col-4' : resolution === 'Desktop', 'col-6' : resolution === 'Mobile' }">
      {{item}}
    </div>
  </ng-container>
</div>

Not quite sure if this is what you're looking for. Here is a stackblitz example...

https://stackblitz.com/edit/angular-bootstrap-4-starter-jsiaw1?file=src/app/sales/sales.component.html