如何根据用户选择的颜色创建多个矩形并填充矩形？

Question

我是角度编码的新手，对于我的项目，我需要创建多个矩形并根据我们选择的值填充矩形，任何人都知道哪个模块会提供这样的功能

Answer 1

试试这个..

.html

<div class="triangle-up" [ngClass]="color1"></div>
<button (click)="setColor('red')">Red</button>

<div class="triangle-up" [ngClass]="color2"></div>
<button (click)="setColor('green')">Green</button>

或使用下拉选项

<div class="triangle-up" [ngClass]="color"></div>
<div class="triangle-up" [ngClass]="color"></div>

<select name="triangle" (change)="setColor2($event.target.value)">
  <option name="green" value="green">Green</option>
  <option name="red" value="red">Red</option>
</select>

.ts

color1 = 'black';
color2 = 'black';



 //use this method for button click event
    setColor(value) {
       switch (value) {
          case 'green': 
            this.color2 = 'green'; 
            break;
          case 'red': 
            this.color1 = 'red'; 
            break;
     }

  //use this method for dropdown option change event
  setColor2(event) {
    this.color = event; 
  }
  

.css

.triangle-up {
  width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid black;
}

.red {
    border-bottom: 100px solid red;
 }
    
.green {
   border-bottom: 100px solid green;
}

注意：如果您想单击单个按钮或从下拉列表中选择，并将该颜色应用于所有三角形，那么您只需使用一个变量并将相应的类分配给 this.color。 [ngClass] 将动态选择选定的类名。