Angular 8在单击时使用ngFor切换CSS类

Question

我发现了与此类似的场景，但我还没有找到确切的场景。很抱歉我错过了。

在Angular 8中，我使用*ngFor来遍历一些消息对象。这将在屏幕左侧的一行垂直框中显示消息标题和日期/时间。我想说的是，当一个框被点击时，它会变为活动状态并改变颜色。我有这个工作，但问题是，当单击另一个框时，"活动"类不会停用。这就是我正在努力解决的问题。

这是我当前的CSS代码：

<div *ngFor="let msg of messages; let i = index">
<a class="list-group-item list-group-item-action" 
data-toggle="list" href="#home" role="tab" 
[ngClass]="{ 'active' : isActive}" (click)="popIt(i)">
<span id="msgSubject1">{{msg.Subject}}</span>
<br />
<span class="datetimeCls" id="datetime1">
{{msg.DateCreated | date : 'short' }}
</span>
</a>
</div>

popIt(num: string) {
var number = num;
this.SubjectDisplay = this.messages[num].Subject;
this.DateDisplay = this.messages[num].DateCreated;
this.TextDisplay = this.messages[num].Body;
}

.list-group .list-group-item {
color: grey;
font-weight: bold;
font-family:"Gill Sans" Verdana;
font-size: 15px;
background-color: #FFFFFF;
}
.list-group .list-group-item.active {
background-color: lightgray !important;
border-top: solid 2px grey;
border-bottom: solid 2px grey;
color: grey;
}

这会按预期显示对象属性，单击会起作用，但在单击时会使每个框处于活动状态。它们不会失活。

任何指导、建议或示例都将不胜感激！非常感谢。

Answer 1

一种方法是使用activeMessage属性：

public activeMessage: Message; // Use the appropriate type here

点击设置并在类绑定中测试：

<div *ngFor="let msg of messages">
<a [class.active]="msg === activeMessage"
(click)="activeMessage = msg; doOtherStuff()" ... >
...
</a>
</div>

有关演示，请参阅此stackblitz。

Answer 2

更改代码并将有关单击的message的某个唯一标识符的信息存储在parent组件中。然后，您可以很容易地将click listener添加到组件中，并在parent组件内部更新存储的id。但您必须稍微更改HTML[ngClass]指令，以在message.Id===clickedMessageId的情况下返回true。或者您可以将整个消息存储在f.e.clickedMessage中，然后您可以执行message===clickedMessage。另一种实现方法是，您可以创建自定义的directive和service，当您单击directive时，通知service取消单击其他所有对象。但是，一旦directive被销毁，您必须记住将它们从服务中删除。