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

Question

我正在尝试获取此数组（最终将来自 API 以生成实际组件）：

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

允许我在 Bootstrap 行和列中多次生成组件。

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

第一个视图 = 一个带有 3 col-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 列。

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