如何在 ng for 循环中动态创建引导行和列

Question

我有来自后端的数据（地图数量），所以我需要将地图放在页面上。 但是地图必须放置偶数和奇数条件 （即，如果地图的长度为 1，则必须在整个页面上显示地图。如果为 2，则必须将两个地图放置在一行中，如果为 3，则必须在一行中显示两个地图以及另一行中的一个完整宽度的地图）

dashboard.component.html

<div class="col-sm-5"  *ngFor="let map of sensors; let i = index" >
   <span *ngIf = "sensors.length % 2 == 1 && i < sensors.length - 1">
      <div id="map{{i}}" style="height: 300px;border: 1px solid gray;">
      </div>
   </span>
   <span *ngIf = "sensors.length % 2 == 0">
      <div id="map{{i}}" style="height: 300px;border: 1px solid gray;">
      </div>
   </span>
</div>
<span *ngIf = "sensors.length % 2 == 1">
   <div class="col-sm-8">
      <div id="map{{sensors.length - 1}}"  style="height: 300px;border: 1px solid gray;">
      </div>
   </div>
</span>

对于上面的代码，两个地图正在加载，但第三个地图没有加载。

我尝试了多种方法但无法找到解决方案，任何人都可以帮助我解决这个问题。

Answer 1

很可能有更好的方法，但首先想到的是，不是很动态，希望它有所帮助，假设Bootstrap 4：

• 一项：列将是全宽
• 两项：列在一行上的宽度是均匀的
• 三项：前 2 项将在一行上为等宽，第三项将在第二行上强制为全宽

给定：

sensors = [
    'https://via.placeholder.com/150',
    'https://via.placeholder.com/150',
    'https://via.placeholder.com/150'
]

模板：

<div class="row">
    <div *ngFor="let map of sensors; let i = index" class="col p-2" [ngClass]="{ 'col-12' : sensors.length==3&& i==2}">
        <img [src]="map" width="100%">
    </div>
</div>