为单击的 div 添加边框

Question

我有一个用来存储一些信息的对象。为了呈现这些数据，我使用了 * ngFor 为每个实例创建一行。

当我单击其中一行时，有没有办法添加边框？边框只能添加到单击的行上，如果单击另一行后，边框从上一行消失并出现在当前行中。

我怎样才能做到这一点？

演示

.html

<div *ngFor="let item of objects; let i = index" style="width: 100%;">
    <div class="d-flex flex-row divs">
        <div>
            <span>{{item.id}}</span>
        </div>
        <div>
            <div>
                <span>{{item.name}}</span>
            </div>
        </div>
        <div style="margin-left:auto">
            <button>click</button>
        </div>
    </div>
</div>

Answer 1

您可以ngClass根据您单击的项目动态设置类。

例如 ：

<div class="d-flex flex-row divs" 
    [ngClass]="{'active' : (selectedItem.id === item.id)}"> <div>
  ...

</div> 

然后单击按钮，您可以传递被单击的项目：

<div style="margin-left:auto">
            <button (click)="setItem(item)">click</button>
        </div>

在component.ts文件中您可以按如下方式设置所选项目：

public selectedItem :any = {};

setItem(item){
  this.selectedItem = item
}

现在在 css 中你可以有.active如下的 css 类：

.active{
  border : 1px solid red;
}

这是工作示例：demo。