如何禁用来自循环的其他div，除了单击的div

Question

我有一些li 标签，其数据来自循环。当我单击任何li 标记时，它将通过更改其图像变为活动状态并将存储到本地存储中，以便在刷新时单击的标记仍然处于活动状态。在这里，当我们单击时，一个活动对象正在将单击的 li 标签添加到 json 中并将其存储在 localstorage 中。现在的问题是，当我再次单击单击的 li 标记或其外部时，它会切换较早的图像，这不应该发生。同样，除了被点击的标签之外，其他li 标签应该被禁用。下面是代码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
    }
  }
}

Answer 1

在我看来，您只需要在 toggleActive 方法中添加一些逻辑即可。在决定是否对点击执行任何操作之前，您可以检查是否有任何项目处于活动状态。这样的事情能解决你的问题吗？

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