dalam div dinamis - saat klik sorot warna

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');
}

Sekarang div bersifat dinamis, katakanlah jumlah elemen div adalah 6, pada acara klik saya harus mengubah warna latar belakang div tertentu yang diklik menjadi abu-abu dan warna lainnya harus tetap sama. Sekarang jika saya mengklik div katakanlah 2, hanya div ke-2 yang disorot dengan warna abu-abu, warna lainnya harus tetap sama dan sebaliknya.


angular html css angular5
person chandu    schedule 12.10.2020    source sumber
comment
Anda dapat meneruskan acara dengan klik sebagai berikut (click)="nodeClickLevel1(event) dan mengakses elemen yang sama dalam metode melalui event.target. Lihat postingan ini.   -  person riorudo    schedule 12.10.2020

Jawaban (2)


arrow_upward
0
arrow_downward

Ubah fungsi Anda seperti ini

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

ubah kode template anda seperti ini

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

Semoga ini bisa menyelesaikan masalah Anda.

person Piyali Ghosh    schedule 12.10.2020

arrow_upward
0
arrow_downward

Kode Anda bisa lebih sederhana, tidak perlu ElementRef yang merepotkan, tidak perlu id indeks, dll. Jadi ini kodenya:

//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 {}

dan css:

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

Berikut ini tautan PLNKR yang berfungsi: http://plnkr.co/edit/oRZa3E5WtYpusKHd

person Sinisa Rudan    schedule 19.10.2020