Angular 如何突出显示选定单元格

我有一个列表项，因此我想突出显示选中的项。我如何做到这一点

下面是代码

您可以始终使用类中的函数，例如

和您的.css文件：

currentChoice = '';


    setActive(choice: string)
      {
        this.currentChoice = choice;
      }
    
      getActive(choice: string): string{
        if (this.currentChoice === choice) {
        return 'active';
        }
        else {
        return 'not';
        }
      }

.active{
  background-color: yellow;
}

---

如果您想一次突出显示多个项目，可以使用选项列表。

您可以始终使用类中的函数，例如

和您的.css文件：

currentChoice = '';


    setActive(choice: string)
      {
        this.currentChoice = choice;
      }
    
      getActive(choice: string): string{
        if (this.currentChoice === choice) {
        return 'active';
        }
        else {
        return 'not';
        }
      }

.active{
  background-color: yellow;
}

---

如果您想一次突出显示多个项目，可以使用选项列表。

一种简单的方法是将活动单元格Id（我指的是这些

仪表板a

）保存在组件中，比如我们将其存储在名为

activeCell

的字段中

然后在html中，您可以简单地执行以下操作

<a ... 
    class="dropdown-item"
    [class.selected]="activeCell === 'dashboarda'"
    [routerLink]="['dashboarda']">Dashboarda</a>

---

现在，所有项目的不透明度都将为0.7，但所选项目的不透明度为0.7。一种简单的方法是将活动单元格Id（我指的是这些

仪表板A

）保存在组件中，比如我们将其存储在名为

activeCell

的字段中

然后在html中，您可以简单地执行以下操作

<a ... 
    class="dropdown-item"
    [class.selected]="activeCell === 'dashboarda'"
    [routerLink]="['dashboarda']">Dashboarda</a>

---

现在，所有项目的不透明度都为0.7，但选定的项目

您的意思是要在单击时更改选择吗？@MichałTkaczyk否我要突出显示我选择的项目，因此您要在

上添加特定的
css
代码。选定的
类。我真的不知道你所说的突出显示是什么意思，有几种方法可以做到这一点，你可以根据自己的喜好在类中设置
background color
属性。您也可以设置
box shadow
属性。@MichałTkaczyk，因此当您从列表中选择div时，我想将其激活。因此，如果我们键入active，它可能会在课堂上突出显示。你的意思是想在单击时更改选择吗？@MichałTkaczyk否我想突出显示我选择的项目，因此你想在
上添加特定的
css
代码。已选择的
类。我真的不知道你所说的突出显示是什么意思，有几种方法可以做到这一点，你可以根据自己的喜好在类中设置
background color
属性。您也可以设置
box shadow
属性。@MichałTkaczyk，因此当您从列表中选择div时，我想将其激活。因此，如果我们键入active，它可能会在类中突出显示。您是否检查过您的函数
getActive
将执行多少次？这不是一个好的方法…我明白了，有一种不同的方法，它肯定比.ts文件好得多，例如：在.ts文件中，我们可以使用ViewChild作为ElemRef从id获取锚点，以设置新的背景颜色或类。我认为最好的方法是根据.ts文件中的某个变量向模板添加可选的类参数。设置为活动的部分是可以的，但是这个
ViewChild
想法在这里太多了。我只想在模板中添加一些类似
[class.active]=“active==='d1'
，并在
setActive
函数中添加
this.active=parameterFromFunc
。您是否检查了函数
getActive
的执行次数？这不是一个好的方法…我明白了，有一种不同的方法，它肯定比.ts文件好得多，例如：在.ts文件中，我们可以使用ViewChild作为ElemRef从id获取锚点，以设置新的背景颜色或类。我认为最好的方法是根据.ts文件中的某个变量向模板添加可选的类参数。设置为活动的部分是可以的，但是这个
ViewChild
想法在这里太多了。我只想在模板和
this.active=parameterFromFunc
内部
setActive
函数中添加类似于
[class.active]=“active==='d1'”
的内容。