css - Angular - 具有多重选择的事件和非事件 CSS

Question

我需要建议。

我需要能够选择两个元素。

可以通过按“shift”选择第二个元素。 如何在单击一个元素时更改背景颜色并在单击另一个元素时重新修改？

使用图像可能更有意义:

Answer 1

您可以在 html 中使用这样的条件

[style.background-color]="a.xx? 'purple': 'turquoise'"

或者在你的组件中，例如:

 @Component({   
   selector: 'hello',   
   template: `
     <a-item *ngFor="let a of catalogue" 
       [a]="a"
       [style.background-color]="a.xx ? 'green': 'red'">
     </a-item>   ` })

您可以定义一个类，并在有人单击其他框时更改该类。也就是说，类“.previous_selected”和“now_selected”以及 onclick 新元素会更改新元素将具有的类 now_selected，而前一个元素将具有另一个类

其他选项:

示例:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  colorA = 'red'
  colorB = 'blue'
}

在 HTML 中

<div [style.color]="isSelected ? colorA : colorB">Some example text</div>

isSelected 可以是一个表示 true 或 false 的函数。

您可以找到更多信息here