时间戳

首页 > 解决方案 > 从循环使用css如何动态更改框颜色

css - 从循环使用css如何动态更改框颜色

问题描述

我已经提到了我的项目的完整代码。

组件.ts

这是在表中填充数据的方法：

  public get_planet_positions(pos_array) {
            let planet_pos_array = []
            let data_array = [[
                    [], [], [], []
                ], [
                    [], [], [], []
                ], [
                    [], [], [], []
                ], [
                    [], [], [], []
                ]]
    
            let planets = [
                "Sun",
                "Moo",
                "Mar",
                "Mer",
                "Jup",
                "Ven",
                "Sat",
                "Rah",
                "Ket",
                "Asc"
            ]
            var messageStringAfter = "";
            for (let i = 0; i < planets.length; i += 1) {
    
                planet_pos_array.push([
                    planets[i],
                    this.planet_alphabet[pos_array[i]]
    
                ])
    
                console.log(planet_pos_array)
            }
    
            for (let i = 0; i < data_array.length; i += 1) {
                for (let j = 0; j < data_array.length; j += 1) {
                    for (let k = 0; k < planet_pos_array.length; k += 1) {
                        if (i + "," + j == planet_pos_array[k][1]) {
    
                            data_array[i][j].push(planet_pos_array[k][0]);
                        }
                    }
                }
            }
            return data_array
        }

该循环将调用该函数 10 次：

for (let i = 1; i < this.arrays.length; i++) {
                    console.log("ll", this.arrays[i])
                    this.planets_array
                        .push(this.get_planet_positions(this.arrays[i]));
                }

HTML

动态创建表：

   <div class="col-md-4" *ngFor="let ar of arrays|slice:1:7;index as i">
                <div>
                  <div class="chart_row" *ngFor="let row of planets_array[i]">
                    <div class="chart_cell chart cell " *ngFor="let cell of row ; index as j;odd as odd; even as even" [ngClass]="['cell1','cell2','cell3','cell4','cell5','cell6']">
                      <div class="">
                        <p class="para">{{j+1}}</p>
                      </div>
                      <br>
                    </div>
                </div>
              </div>

实际输出

当前输出图像

预期产出

每个框都应填充不同的颜色。是否有捷径可寻？如果是这样，很想看到最好的方法来做到这一点。

非常感谢你。

第二张图片

标签： cssangularangular6

解决方案

您可以像这样简单地编写 css class="cell-{{j}}"

<div class="col-md-4" *ngFor="let ar of arrays|slice:1:7;index as i">
    <div>
         <div class="chart_row" *ngFor="let row of planets_array[i]">
             <div class="chart_cell chart cell " *ngFor="let cell of row ; index as j;odd as odd; even as even">
                 <div class="cell-{{j}}">
                     <p class="para">{{j+1}}</p>
                 </div>
                 <br>
             </div>
         </div>
    </div>
</div>

推荐阅读