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

Question

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

Component.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>

实际输出

预期输出

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

非常感谢您。

second image

Answer 1

如果您想在 JavaScript 中计算颜色，可以使用NgStyle Directive。

该指令可以获取一个 JavaScript 对象，将其转换为 CSS，并将其应用于 HTML 元素。

例如：

<div *ngFor="let item of items">
    <div [ngStyle]="{'background-color': item.color}">
        {{item.text}}
    </div>
</div>

items 看起来像这样：

items = [
    { text: 'A', color: 'red' },
    { text: 'B', color: 'green' },
    { text: 'C', color: 'blue' },
    { text: 'D', color: '#54e5d7' } // Hex colors also work
];

通过这种方式，您可以任意计算颜色。 事实上，请参阅 this answer 在 JavaScript 中随机生成颜色。

如需更多信息，请查看Angular documentation。 另请参阅AngularJS to Angular quick reference on NgStyle。

Answer 2

你可以试试这个

.chart_row:nth-child(1){
   background:red;
}
.chart_row:nth-child(2){
   background:blue;
}
.chart_row:nth-child(3){
   background:green;
}
.
.
.more

Answer 3

你可以像这样简单地写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>

Answer 4

我认为通过此代码，您可以了解如何为每个单元格动态应用样式

HTML

 <div  class="chart_row" id="chart_row{{i}}"   *ngFor="let row of planets_array;let i = index;">
      <div class="chart_cell"  id="cells{{i}}{{j}}"  *ngFor="let cell of row;let j = index;">{{cell}}</div>
    </div>

TS

import { Component,AfterViewInit,ElementRef, ViewChild} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements AfterViewInit {
months = [
        "L",
        "A",
        "B",
        "C",
        "K",
        "D",
        "J",
        "E",
        "I",
        "H",
        "G",
        "F"
    ];
    days = [
        "K",
        "L",
        "C",
        "L",
        "C",
        "L",
        "E",
        "F",
        "L",
        "F"
    ];
    index;
    a = [
        "K",
        "L",
        "C",
        "L",
        "C",
        "L",
        "E",
        "F",
        "L",
        "F",
        "u",
        "i"
    ];

    /* Charts start */

    planet_alphabet = {
        "A": "0,1",
        "B": "0,2",
        "C": "0,3",
        "D": "1,3",
        "E": "2,3",
        "F": "3,3",
        "G": "3,2",
        "H": "3,1",
        "I": "3,0",
        "J": "2,0",
        "K": "1,0",
        "L": "0,0"
    }
    data_array_test = [[
                [], [], [], []
            ], [
                [], [], [], []
            ], [
                [], [], [], []
            ], [
                [], [], [], []
            ]]
    public planets_array :any;

    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;

    }
constructor(private nativeElement:ElementRef) {


 this.planets_array = this.get_planet_positions(["K", "L", "C", "L", "C", "L", "E", "F", "L", "F"]);
 console.log(this.planets_array)

}
ngAfterViewInit(){
      //  for(let i of this.data_array_test){
      //    for(let j of i){
      //       this.cells = this.cells.nativeElement;
      //    }
      //  }
      for(let i =0;i<4;i++){
      //  let id = "chart_row"+i;
      //  var x = document.getElementById(id);
      //  console.log(x);
      for(let j=0;j<4;j++){
        var id = "cells"+i+j;
        var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        var x2 = document.getElementById(id).style.border="solid 1px"+" "+color;
        console.log(x2);
      }
      }


}





}