在一个ng for中选择被点击的元素,并将类仅添加到所选元素中,可以通过以下步骤实现:
<div *ngFor="let item of items" (click)="selectItem(item)" [ngClass]="{ 'selected': item === selectedItem }">
{{ item.name }}
</div>
上述代码中的items是一个包含所有元素的数组,item代表循环的当前元素。每个元素都被渲染成一个div,并绑定了一个点击事件selectItem。ngClass指令根据一个条件表达式判断是否为当前被选中的元素添加selected类。
selectedItem: any;
selectItem(item: any) {
this.selectedItem = item;
}
上述代码中的selectItem方法用于设置selectedItem为被点击的元素。
.selected {
background-color: yellow;
}
上述代码中的.selected类可以根据实际需要自定义样式。
综上所述,以上是在一个ng for中选择被点击的元素,并将类仅添加到所选元素中的实现方法。
对于相关的概念、分类、优势、应用场景以及推荐的腾讯云相关产品和产品介绍链接地址,由于问题中要求不提及具体的云计算品牌商,无法提供相关信息。但可以说明ngFor是Angular框架中的一个指令,用于循环渲染元素列表,提供了便捷的方式来处理数据集合的展示。具体的云计算、IT互联网领域的名词词汇及其解释,需要具体给出相关名词以便提供详细的解答。
领取专属 10元无门槛券
手把手带您无忧上云