Javascript Angular 8使用ngFor on click切换CSS类

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

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

以下是我当前使用CSS的代码：

popIt（num:string）{
var数=num；
this.SubjectDisplay=this.messages[num].Subject；
this.DateDisplay=this.messages[num].DateCreated；
this.TextDisplay=this.messages[num].Body；
}

.list group.list group项目{
颜色：灰色；
字体大小：粗体；
字体系列：“Gill Sans”Verdana；
字体大小：15px；
背景色：#FFFFFF；
}
.list group.list-group-item.active{
背景色：浅灰色！重要；
边框顶部：纯色2倍灰色；
底部边框：纯色2倍灰色；
颜色：灰色；
}

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

---

任何指导、建议或示例都将不胜感激！谢谢大家!

一种方法是使用

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>

用于演示。
更改您的代码，并在您的
父组件中存储有关单击的
消息
的某些唯一标识符的信息。然后，您可以轻松地将click listener添加到组件和
父级
组件更新存储id的内部。但您必须稍微更改HTML
[ngClass]
指令，以返回
true
if
message.id==clickedMessageId
。或者您可以将整个消息存储在f.e.
clickedMessage
，然后您可以执行
消息===clickedMessage
。另一种方法是，当您单击
指令
通知
服务
以松开其他对象时，可以创建自定义
指令
和
服务
。但是，一旦
指令
被销毁，您必须记住将其从服务中删除。
您能否显示组件中的相关代码？这对于理解此处的问题至关重要。
isActive
似乎是一个常见变量，你需要像
msg.isActive
这样的东西，并在
popIt（）
Pass
msg
中直接切换：
popIt（msg）
@KurtHamilton我添加了popIt（）方法，很抱歉错过了。