点击 Angular2 中的 UL 列表

Question

我有一个列表，我想在单击任何 li 时获取类名

<ul id='color' name='color' class="choose-color" (click)=getColor()>
<li class="color1"></li>
<li class="color2"></li>
<li class="color3"></li>
</ul>

我已经尝试了 3 种不同的解决方案，但没有一个有效

//#### 解决方案 1

$('#color > li').click(function() { 
alert(this.class);
console.log("doce");
});

//#### 解决方案 2

$('.color > li').click(function() { 
alert(this.class);
console.log("docevdfvd");
});

//#### 解决方案 3

$('ul > li').click(function() { 
//  $('#selectedList').show();
alert(this.class);
console.log("docevdfvdwcwecwecfe");
});

所以你能帮我吗..我们如何实现这个

Answer 1

如果您的列不是动态的：

<ul id='colorList' name='colorList' class="choose-color">
<li class="workspace-fill-color{{i}}" *ngFor="let i of [1, 2, 3, 4, 5, 6, 7]" (click)="getColor(i)"></li>
</ul>

在您的组件中：

getColor(i) {
let class = $(`.workspace-fill-color${i}`).attr('class');
// Or simply 
let class = `workspace-fill-color${i}`;
}