ในไดนามิก 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>

ซีเอสเอส

 .activeColor {
   background-color: grey;
}

จาวาสคริปต์

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 ที่ 2 เท่านั้นที่มีการไฮไลต์ด้วยสีเทา สีที่เหลือควรคงเดิมและในทางกลับกัน


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

และซีเอสเอส:

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

นี่คือ ลิงก์ PLNKR ที่ใช้งานได้: http://plnkr.co/edit/oRZa3E5WtYpusKHd< /ก>

person Sinisa Rudan    schedule 19.10.2020