Как изменить изображение определенного div при нажатии на тот div, данные которого поступают из l oop in angular 8

Question

У меня есть какой-то список ul li, данные которого поступают из l oop. Моё требование - когда я нажимаю на любой конкретный li, изображение этого li должно быть заменено вторым изображением (dummyimage.com/300.png/09f). / fff) нравится active.Again, даже если я refre sh страница, которая должна быть изменена. Вот код ниже 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));
  }