如何在单击该 div 时更改特定 div 的图像，该 div 的数据来自角度 8 中的循环

Question

我有一些 ul li 列表，其数据来自循环。我的要求是，一旦我点击任何特定的 li，该 li 的图像应更改为第二张图像（dummyimage.com/300.png/09f/fff）像 active.Again 一样，即使我刷新页面，更改也应该在那里。下面是代码https://stackblitz.com/edit/angular-jmcye7?file=src%2Fapp%2Fapp.component.html

home.component.html

    <div>
    <ul>
    <li style="border:1px solid;width:25%;margin-bottom:1%;cursor:pointer;padding:4px;" *ngFor="let items of statusdata"  (click)="getData(items)"><span>{{items.id}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{items.name}}</span>
    <span><img [hidden]="nonactive" style="width:20px;height:20px;float:right" src ="/assets/1.png">
    <img [hidden]="active" style="width:20px;height:20px;float:right" src ="/assets/2.png">
    </span>
    </li>
    </ul>
    </div>

home.component.ts

    import { Component, OnInit } from '@angular/core';
    import { CommonserviceService } from './../utilities/services/commonservice.service';
    import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
    declare var $: any;
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
      getIt:any;
  statusdata: any;
  getOption:any;
  myData:any;
  myDataGet:any;
  active:boolean = true;
  nonactive:boolean = false;
  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'}
  ];
console.log(this.getOption);
this.myDataGet = localStorage.getItem('dataSource');
      if(this.myDataGet == 'true' ){
         this.nonactive = true;
         this.active = false;
      }
      else{
          this.nonactive = false;
         this.active = true;
      }   
  }
  getData(items){
      this.myData = items.active;
      localStorage.setItem('dataSource', this.myData);
      this.myDataGet = localStorage.getItem('dataSource');
     /* if(this.myDataGet == 'true' ){
         this.nonactive = true;
         this.active = false;
      }
      else{
          this.nonactive = false;
         this.active = true;
      }*/
  } 


    }

Answer 1

当您请求对密钥的存储进行数据检查时。

看到这个：https://stackblitz.com/edit/angular-cazlo3?file=src/app/app.component.html

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

组件 TS

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

    this.statusdata.forEach(item => {
      this.getCacheItemStatus(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
    }
  }

当您将项目的状态切换为活动状态时，将其缓存。

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