Angular 8 переключение CSS класса с помощью ngFor на клике

Question

Я нашел похожий сценарий ios с этим, но я еще не нашел этот точный сценарий. Извините, если я пропустил это.

В 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>

См. этот стек * блиц для демонстрации.

Answer 2

Измените свой код и сохраните информацию в вашем parent компоненте о каком-то уникальном идентификаторе message, по которому щелкнули. И тогда вы можете легко добавить прослушиватель щелчков к компоненту, и внутри parent компонента обновления хранится идентификатор. Но вам нужно немного изменить директиву HTML [ngClass], чтобы вернуть true, если message.Id===clickedMessageId. Или вы можете сохранить все сообщение в fe clickedMessage, тогда вы можете сделать message===clickedMessage. Еще одним способом достижения этого является создание пользовательских directive и service, когда вы нажимаете directive notify service, чтобы отменить щелчок для любого другого объекта. Но вы должны помнить, чтобы удалить их из службы, как только directive был уничтожен.