如何根据元素数量添加传单地图

Question

我想在页面上添加传单地图，条件是..

如果它是一个，它必须与引导网格列一起放置整个宽度，如果它有两个它必须放置在具有相同 col 宽度的行中（比如 col-6），它是三个意味着它必须将两张地图放在一行中，将一张地图放在第二行，整个宽度，

如果是 5，则表示一排有两个地图，第二排有两个地图，第三排有一个地图，整个宽度 （注意：来自后端的元素数量是动态的）

.component.ts

  
      for ( var j =0;j<this.sensorsarray.length;j++){

    var v= "map"+i+"";
    var  div=document.createElement("div");
    div.id = v;
      div.style="height:380px;";
                  console.log(v);
                
                  document.getElementById('mapper').appendChild(div);


// some code 
}

.component.html

<div class="row no-gutters">
      
     <div class="col-6" [ngClass]="{ 'col-12' : array.length %2 ==1 }">
        <div id="mapper"  style="height: 385px;border: 1px solid gray;"></div>  
   
        </div>
       
        
  </div>

任何人都可以帮我解决上述问题。

Answer 1

以下代码将解决您的问题：

在 .ts 文件中定义了您的数组：

array = [1,2,3,4,5,6,7]

在html中

    <div class="row no-gutters">
    <div *ngFor="let item of array; let i=index;" 
        [ngClass]="i===(array.length-1) && (array.length % 2!==0) ? 'col-12' : 'col-6'">
        <div id="mapper"style="height: 385px;border: 1px solid gray;"></div>
    </div>
    </div>

对于您更新的问题，我认为这可能是解决方案：

for (var i = 0; i < this.sensorsarray.length; i++) {
      var v = "map" + i + "";
      var div = document.createElement("div");
      div.id = v;
      document.getElementById("mapper").appendChild(div);
      var map = document.getElementById("map" + i);
      map.style.height = "380px;";
      if (
        i === this.sensorsarray.length - 1 &&
        this.sensorsarray.length % 2 !== 0
      ) {
        map.classList.add("col-12");
      } else {
        map.classList.add("col-6");
      }
      // some code
    }

<div class="row no-gutters">
    <div class="w-100">
        <div id="mapper" style="height: 385px;border: 1px solid gray;" class="row"></div>
    </div>
</div>