Angular - css изменения стиля в списке объектов в * ngFor

Question

У меня есть два компонента: родительский:

<ng-container *ngIf="itemList != null">
  <div *ngFor="let item of itemList">
    <component-item [componentItem]="item"></component-item>
  </div>
</ng-container>

и дочерний (компонент-элемент):

<div class="row myClass" [ngClass]="{'selected': isSelected }" (click)="method()">
    ...
</div>

В результате у меня есть список элементов. У меня есть два стиля css: по умолчанию и «выбранный». Я хотел бы изменить стили элементов после нажатия на них, например: когда я нажимаю на первый элемент, он должен измениться на «выбранный», а затем после нажатия на второй элемент он должен измениться на «выбранный», а первый вернуться к значению по умолчанию. Моя переменная "isSelected" является логическим типом, и я изменяю ее значение на "true" в "method ()". Как я могу изменить его значение на «ложь», когда я выбираю другой элемент из списка?

Answer 1

Try like this, it may work

В файле component.ts cssEnabled: any = "";

private method(itemName:string)
{

 this.cssEnabled=itemName;

}
In compontent.html :

<div class="row myClass" [ngClass]="{'selected': componentItem==cssEnabled}" (click)="method(componentItem)">
    ...
</div>

Answer 2

В method() установите isSelected : false для всех дочерних элементов компонента, прежде чем установить isSelected : true для выбранного компонента.