Html 在动态div中，单击“亮显颜色”

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>

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，只有第二个div有灰色高亮显示，其余的颜色应该保持不变，反之亦然。

像这样更改您的函数

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

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

像这样更改模板代码

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

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

---

希望它能解决您的问题。

您的代码可以更简单，不需要麻烦的

ElementRef

，不需要索引ID等。 下面是代码：

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule}；
从“@angular/platform browser”导入{BrowserModule}；
@组成部分({
选择器：“我的应用程序”，
//templateUrl:“app.html”，
模板：`
{{root}
`,
})
导出类应用程序{
名称：字符串；
构造函数（）{}
受保护的myTag：任何；
公共rootzTemplates：任意[]=[“第一”、“第二”、“第三”]；
nodeClickLevel1（根）{
this.myTag=root；
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]，
})
导出类AppModule{}

和css：

.activeColor{
背景色：灰色！重要；
}
.导航-小{
背景色：黑色；
}

以下是正在工作的PLNKR链接：

---

您可以按如下方式在单击时传递事件

（单击）=“nodeClickLevel1（事件）

，并通过

事件访问方法中的相同元素。target

。请查看此项。