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

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>

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

How to create the bootstrap rows and columns dynamically in ng for loop

angular

twitter-bootstrap

bootstrap-4

angular-ui-bootstrap

bootstrap-grid