javascript - Hur man inaktiverar andra div:ar som kommer från en loop utom den som klickas

Jag har några li-taggar vars data kommer från en loop. När jag klickar på någon li-tagg blir den aktiv genom att bilden ändras och den kommer att lagras i localStorage så att den klickade taggen fortfarande är aktiv vid uppdatering. Här, när vi klickar, läggs ett aktivt objekt till i JSON med den klickade li-taggen och lagras i localStorage. Problemet är nu att när jag klickar igen på den klickade li-taggen eller utanför den, ändras den tidigare bilden, vilket inte borde hända. Andra li-taggar bör fortfarande vara inaktiverade förutom den klickade. Här är koden nedan https://stackblitz.com/edit/angular-skzgno?file=src%2Fapp%2Fapp.component.ts

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div>
    <pre>

  </pre>
    <ul>
<li *ngFor="let item of statusdata" (click)="toggleActive(item, !item.active)">
  <span>{{item.id}}</span>
  <span>{{item.name}}</span>
  <span>
    <img *ngIf="!item?.active || item?.active === false" src ="https://dummyimage.com/qvga" />
    <img *ngIf="item?.active === true" src ="https://dummyimage.com/300.png/09f/fff" />
  </span>
</li>
    </ul>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  statusdata: any;

  ngOnInit() {
    this.statusdata = [
      { id: 1, name: "Angular 2" },
      { id: 2, name: "Angular 4" },
      { id: 3, name: "Angular 5" },
      { id: 4, name: "Angular 6" },
      { id: 5, name: "Angular 7" }
    ];

    this.statusdata.forEach(item => {
      this.getCacheItemStatus(item);
    });
  }

  toggleActive(item, activeStatus = true) {
    item.active = activeStatus;
    localStorage.setItem(`item:${item.id}`, JSON.stringify(item));
  }

  getCacheItemStatus(item) {
    const cachedItem = localStorage.getItem(`item:${item.id}`);
    if (cachedItem) {
      const parse = JSON.parse(cachedItem); // Parse cached version
      item.active = parse.active; // If the cached storage item is active
    }
  }
}

Svar #1

Det verkar för mig som att du bara behöver lägga till lite logik i din toggleActive-metod. Du skulle kunna kontrollera om några objekt är aktiva innan du bestämmer om du ska göra något åt klicket. Löser något som detta ditt problem?

toggleActive(item, activeStatus = true) {
   if(item.active || !this.statusdata.some(d => d.active)){
      item.active = activeStatus;
      localStorage.setItem(`item:${item.id}`, JSON.stringify(item));
   } 
}