Переключение CSS активных классов на события клика в Blazor

Question

Я пытаюсь найти лучший способ включать и выключать классы css с помощью событий нажатия Blazor. Эта функция включает в себя щелчок на столбце списков, созданных с помощью @foreach, изменение стиля только для активного блока, а затем отключение его с последующими щелчками на других полях. Короче говоря, только активный блок меняет стиль при щелчке, а все остальные блоки не меняют стиль.

Я начал с приведенного ниже кода, который правильно создает блоки, но применяет «активный» ко всем из списка, а не только в текущее активное поле (это все еще в PO C, поэтому часть кода все еще нуждается в рефакторинге):

 @foreach (var msg in Message)
            {
                <a class="list-group-item list-group-item-action @(ActiveClass ? "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 bool ActiveClass { 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;
    ActiveClass = true;
}

Angular 8 имеет встроенный "ngClass." Следующий код работает для этого сценария - есть ли у Blazor что-нибудь подобное? Я также заметил, что клик Angular может обрабатывать два входа, которые я еще не видел в 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>

Answer 1

Код ниже, похоже, работает. Он создает новую переменную с именем «ActiveMessageId» и назначает этому сообщению идентификатор кликаемого сообщения.

         @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;
    }