css - Angular 2/4 使用 ngStyle 列表项

Question

我正在学习 Angular。当我单击我的函数 clicked(index) 被调用的列表项之一时，我有一个 ul 名称。一切正常。如何设置所选列表项的样式，使其与其他列表项具有“不同的样式”。

import { Component,OnInit } from '@angular/core';

@Component({
selector: 'app-root',
template: `
        <div>
            <ul>
              <li (click)="clicked(i)" *ngFor="let name of names;let i = 
              index">{{name}}</li>
            </ul>
        </div>
     ` ,
styleUrls: ['./app.component.css']  
})
 export class AppComponent {
   title = 'app works!';
   names:string[];
   ngOnInit() {
   this.names = ["paul","pauline","paula"];
   console.log
 }
 clicked(index){
   console.log(this.names[index]);
  }  
}

我还没有定义样式。

Answer 1

您可以存储事件元素的索引:

export class AppComponent {
  activeIndex;

  clicked(index){
    this.activeIndex = index;
  }  
}

然后使用ngClass:

<li [ngClass]="{ 'your-css-class' : i === activeIndex }" (click)="clicked(i)" *ngFor="let name of names;let i = index">{{name}}</li>