在动态 div 中 - 单击时突出显示颜色答案

【问题标题】：in dynamic div - on click highlight color在动态 div 中 - 单击时突出显示颜色
【发布时间】：2020-10-20 01:12:50
【问题描述】：

HTML

<div class="nav--small nodeLevel newColor" id="rowItem-{{i}}" *ngFor="let root of rootzTemplates; let i=index" (click)="nodeClickLevel1(root,i)">
    <p style="padding: 19px 1px;color: #fff; text-align: center;">
        {{root}} 
    </p>
</div>

CSS

 .activeColor {
   background-color: grey;
}

JavaScript

constructor(private el: ElementRef) { }
        
nodeClickLevel1(root, id){
     this.myTag = this.el.nativeElement.querySelector("#rowItem-" + id);
     this.myTag.classList.remove('activeColor');
     this.myTag.classList.add('activeColor');
}

现在 div 是动态的，比如 div 元素的数量是 6，在点击事件时我必须将特定点击的 div 背景颜色更改为灰色，其余颜色应保持不变。现在如果我点击 div 说 2，只有 2nd div 有灰色突出显示，其余颜色应该保持不变，反之亦然。

【问题讨论】：

您可以通过如下方式在点击时传递事件(click)="nodeClickLevel1(event) 并通过event.target 访问方法中的相同元素。看看这个post。

标签： html css angular angular5

【解决方案1】：

像这样改变你的功能

nodeClickLevel1(root, id){
    this.myTag = root
}

像这样更改您的模板代码

[class.newColor]="root === myTag"

希望它能解决你的问题。

【讨论】：

【解决方案2】：

你的代码可以简单很多，不需要麻烦的ElementRef，不需要索引id等。所以这里是代码：

//our root app component
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  // templateUrl: "app.html",
  template: `
    <div class="nav--small nodeLevel newColor" [class.activeColor]="root === myTag" *ngFor="let root of rootzTemplates" (click)="nodeClickLevel1(root)">
            <p style="padding: 19px 1px;color: #fff;    text-align: center;">{{root}}</p>
</div>
  `,
})
export class App {
  name: string;
  constructor() { }
  protected myTag:any;
  public rootzTemplates: any[] = ["first", "2nd", "3rd"];

  nodeClickLevel1(root){
    this.myTag = root;
}
}

@NgModule({
  imports: [BrowserModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

和css：

.activeColor {
   background-color: grey !important;
}
.nav--small{
   background-color: black;
}

这是有效的 PLNKR 链接： http://plnkr.co/edit/oRZa3E5WtYpusKHd

【讨论】：