时间戳

首页 > 解决方案 > 推送后src未知

javascript - 推送后src未知

问题描述

嗨，我在将项目从一个阵列推到另一个阵列时遇到问题。这是我游戏中的装备系统。问题是项目的图像在被推送到另一个数组后具有未知的 src。

角度 ts

  itemy = [{id: 0, name: "sword", url:'../../../../assets/img/sword.png'}, {id: 1, name: "sword2", url:"../../../../assets/img/sword2.png"}];
  images = JSON.parse(localStorage.getItem('images')) || [];
  add (){
    let index=Math.round(Math.random())
    this.images.push(this.itemy[index]);
    localStorage.setItem('images', JSON.stringify(this.images));
  }

  eq = JSON.parse(localStorage.getItem('eq')) || [];
  select() {
    this.eq.push(this.images);
    this.eq.length = 1;
    localStorage.setItem('eq', JSON.stringify(this.eq));
  }
  unselect() {
    this.eq.pop();
    localStorage.setItem('eq', JSON.stringify(this.eq));
  }
}

HTML

<div class="eq">
  <div id="contentInside2" *ngFor="let image of eq">
    <img class="item" src={{image.url}}  (click)="unselect()"/> </div>
 </div>
  <button (click)="add()">Add</button>
<div id="content">
    <div id="contentInside" *ngFor="let image of images">
      <img class="item" src={{image.url}} (click)="select()"/>
    </div>
  </div>

这是现在的样子

标签： javascripthtmlarraysangularimage

解决方案

如果您只想选择单击的图像。

将您的模板更改为：-

<div class="eq">
  <div id="contentInside2" *ngFor="let image of eq; let i=index">
    <img class="item" src={{image.url}}  (click)="unselect(i, image)"/> </div>
 </div>
  <button (click)="add()">Add</button>
<div id="content">
    <div id="contentInside" *ngFor="let image of images; let i=index">
      <img class="item" src={{image.url}} (click)="select(i, image)"/>
    </div>
  </div>

然后打字稿方法： -

select(index, image) {
    if(this.eq.length === 1) {
       return;
    }
    this.eq.push(image);
    this.images.splice(index, 1);
    localStorage.setItem('images', JSON.stringify(this.images));
    localStorage.setItem('eq', JSON.stringify(this.eq));
  }

unselect(index, image) {
    this.eq.splice(index, 1);
    this.images.push(image);
    localStorage.setItem('images', JSON.stringify(this.images));
    localStorage.setItem('eq', JSON.stringify(this.eq));
  }

推荐阅读