如何在 Angular 8 的父/子元素 [divs] 中添加/删除 css 类

Question

我正在开发银行应用程序中的汇款功能。 在这种情况下，客户必须从收件人列表中选择一个收件人，并且选择的收件人应该突出显示是要求。 假设有 3 个嵌套的 div，其中包含每个收件人信息。

我面临的问题是当我选择（单击）收件人 div 时，我无法突出显示它，

我们如何做到 8 角？

<div class="parent">
<div 
class="cards-col col-lg-6 col-md-6 col-sm-6" class="recipient-div"
*ngFor="let recipient of recipientsList"
(click)="selectedRecipient($event)">
    <form id="recipient-form-sendmoney-dummy" method="post">
        <div class="favourite-recipient" onclick="markFavoriteBene(this)" data-beneno="3"></div>
        <div class="recipient-card" onclick="viewRecipient(this)">
            <div class="recipient__avatar"><img class="profile-pic recipient__avatar" src="assets/img/user-img.jpg"></div>
            <h4 class="recipient__name spacer-8 recipient-beneview-content">{{recipient.name}} ({{recipient.name}})</h4>
        </div>
    </form>
</div>

选择-recipient.component.ts 这个类包括一些基本的角度导入并注意很多

selectedRecipient(e){
}

我应该在这个函数中添加什么，以便我可以突出显示[为颜色添加一些 css 类] 选定的收件人？

或者这个问题的任何其他解决方案？

Answer 1

使用NgClass:

在 HTML 元素上添加和删除 CSS 类。

组件模板有一个点击事件监听器，它将执行toggleSelection()。在同一元素上是[ngClass]，它只会在selected 的值为true 时添加highlight 类。

your.component.html

<div
  (click)="toggleHighlight()"
  [ngClass]="{ 'highlight': selected }">
  Click to toggle class
</div>

组件类是您设置selected 值的逻辑在toggleSelection() 方法内部执行的地方。

your.component.ts

...

selected: boolean;

toggleSelection() {
  this.selected = !this.selected;
}

...

这是一个有效的stackblitz 演示这个概念。

Answer 2

如果您想突出显示选定或单击的 div，则可以使用索引来确定单击了哪个项目。

HTML 更改：

[ngClass]="i == selectedIndex ? 'selected' : ''" // for div element which you want to apply styles

TS 变化：

selectedIndex : number;

selectedRecipient(data) {
  this.selectedIndex = data;
}

编辑：

这是关于可用导出值的documentation：

                                    using this
                                     \/\/\/\/
*ngFor="let recipient of folders; let i = index"

Working_Demo