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

Question

我正在尝试获得这个数组(它将在最后从一个生成实际组件的API中获得)：

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

允许我在Bootstrap行和cols中多次生成一个组件。

其想法是提供两种不同的视图，用户可以通过一个按钮进行切换。这部分与问题没有直接联系。

第一个视图=一个包含3列-4的Bootstrap行，因此结果应该是：

0-1-2

3-4-5

6-7-空列

第二个视图=包含2个col 4的Bootstrap行(不是col 6，因为从API进一步调用的元素必须保持相同的大小)，因此结果应该是：

0-1

2-3

4-5

6-7

下面是我现在的代码：

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

现在，我设法每三个组件生成一行，但在此之后，循环再次迭代所有数组，我不知道如何逐行只显示2或3个数字，然后继续下一个系列。所以第一行是0-1-2，第二行是3-4-5...

谢谢。

Answer 1

您可能只需使用[ngClass]指令根据分辨率应用引导列类即可。如果分辨率是桌面应用类col-4给你3列，否则应用类col-6给你2列。

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>

不太确定这是不是你要找的。下面是一个stackblitz的例子。

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