в динамическом 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>

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, только 2-й div будет выделен серым цветом, остальная часть цвета должна остаться такой же, и наоборот.


angular html css angular5
person chandu    schedule 12.10.2020    source источник
comment
Вы можете передать событие по щелчку следующим образом (click)="nodeClickLevel1(event) и получить доступ к тому же элементу в методе через event.target. Ознакомьтесь с этим сообщением.   -  person riorudo    schedule 12.10.2020

Ответы (2)


arrow_upward
0
arrow_downward

Измените свою функцию следующим образом

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

измените код шаблона следующим образом

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

Надеюсь, это решит вашу проблему.

person Piyali Ghosh    schedule 12.10.2020

arrow_upward
0
arrow_downward

Ваш код может быть намного проще, без проблем ElementRef, без идентификаторов индексов и т. Д. Итак, вот код:

//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 < / а>

person Sinisa Rudan    schedule 19.10.2020