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

问题描述

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

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>

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

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

解决方法

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

• 一项：col 将是全宽
• 两个项目：列的宽度在一行上是均匀的
• 三个项目：第一个 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>