Question

我正在学习Angular。当我点击我的函数单击（索引）的一个列表项时，我有一个名字。一切正常。如何设置所选列表项的样式，使其与其他列表项具有“不同的样式”。

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>

Angular 2/4使用ngStyle List项

1 个答案: