NgFor loop out of the li list, how to click on a li, to make it a separate background color change, while other li is not affected?

ngFor loop out of the li list, how to click a li, to make it a separate background color change, while other li is not affected?


each item adds a boolean marked field. Modify this field separately when you click, and switch style classes with ngClass .


<li *ngFor="let item of arr | async; let i = index;" 
    [class.change-color]="selectedindex === i" (click)="onClick(i)">
</li>

maintain a variable selectedIndex,. Set selectedIndex,
in the event handler onClick of click li so that the style of change-color is dynamically added or removed.


this can be achieved by combining JS with the selector class in css. First, give one of them a class name to write down your favorite color, and then loop each li, in JS so that their type is equal to "" for example: className = "" in the extracorporeal circulation, change the type of the currently clicked li through this to your class class name in css

.
Menu