在Blazor中的单击事件上切换CSS活动类

我正试图找到最好的方法来切换css类和Blazor点击事件。此功能包括单击@foreach生成的列表框列，并仅更改活动框的样式，然后单击其他框将其禁用。简言之，只有活动框在单击时更改样式，而所有其他框都不会更改样式

我已经从下面的代码开始，它正确地创建了这些框，但是它将“活动”应用于所有列表框，而不是仅适用于当前活动的框（这仍然在POC中，因此有些代码仍然需要重构）：

@foreach（消息中的var msg）
{
}
私有bool活动类{get；set；}
公共void popIt（int num）
{
var text=Message[num].MessageText；
var subject=消息[num]。主题；
主题=主题；
MessageText=文本；
DateCreated=消息[num]。DateCreated；
ActiveClass=true；
}

Angular 8有内置的“ngClass”。下面的代码适用于这个场景——Blazor有类似的功能吗？我还注意到，角单击可以处理两个输入，我还没有在Blazor中看到：

 <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' : msg == activeMessage}"(click)="activeMessage = msg;popIt(i)">
          <span id="msgSubject1">{{msg.Subject}}</span><br /><span class="datetimeCls" id="datetime1">{{msg.DateCreated | date : 'short' }}</span>
        </a>
      </div>
    </div>

---

下面的代码似乎有效。它创建一个名为“ActiveMessageId”的新变量，并将单击的消息id分配给该消息

         @foreach (var msg in Message)
                    {
                        <a class="list-group-item list-group-item-action @(ActiveMessageId == msg.MsgId ? "active" : "")"  data-toggle="list" href="#home" role="tab" @onclick="() => popIt(msg.MsgId)">
                            <span id="msgSubject1">@msg.Subject</span><br /><span class="datetimeCls" id="datetime1">@msg.DateCreated</span>
                        </a>
                    }

      private int ActiveMessageId { get; set; }

public void popIt(int num)
    {
        var text = Message[num].MessageText;
        var subject = Message[num].Subject;
        Subject = subject;
        MessageText = text;
        DateCreated = Message[num].DateCreated;
        ActiveMessageId = num;
    }

@foreach（消息中的var msg）
{
}
私有int ActiveMessageId{get；set；}
公共void popIt（int num）
{
var text=Message[num].MessageText；
var subject=消息[num]。主题；
主题=主题；
MessageText=文本；
DateCreated=消息[num]。DateCreated；
ActiveMessageId=num；
}

我想我已经解决了这个问题——有时候输入问题有助于解决问题。

         @foreach (var msg in Message)
                    {
                        <a class="list-group-item list-group-item-action @(ActiveMessageId == msg.MsgId ? "active" : "")"  data-toggle="list" href="#home" role="tab" @onclick="() => popIt(msg.MsgId)">
                            <span id="msgSubject1">@msg.Subject</span><br /><span class="datetimeCls" id="datetime1">@msg.DateCreated</span>
                        </a>
                    }

      private int ActiveMessageId { get; set; }

public void popIt(int num)
    {
        var text = Message[num].MessageText;
        var subject = Message[num].Subject;
        Subject = subject;
        MessageText = text;
        DateCreated = Message[num].DateCreated;
        ActiveMessageId = num;
    }