Question

我正在做一个有角度的项目，其中有一个带有相应图像描述的产品图像列表，并且如果用户喜欢该图像，那么他们将在每个图像的右上角显示一个灰色的心形图标。心脏和心脏将变为另一个图像，即红色心脏图像，数据来自 JSON ，我正在应用*ngFor来显示产品图像及其描述，我做了一个点击事件，但是问题是当我点击产品图像的一颗心时，所有的心脏图像都被改变了。 PFB该代码-

请帮助我。

谢谢。

Answer 1

您需要做的是在图像click事件上更改项目的状态。

让我们说你有一个这样的项目。

const item = {
    "id": 1,
    "name": "Beverie",
    "avatar": "https://robohash.org/nemoquiratione.jpg?size=100x100&set=set1"
}

首先，您必须添加属性liked或selected（如果尚不存在）。

item['liked'] =否；

您可以使用constructor或ngOnInt方法对数组中的所有项目执行此操作。

您的html应该看起来像这样。当liked属性为true时，[ngClass]将在liked标签中添加一个类名img

<div>
  <div *ngFor="let item of data">
   {{item.name}}
   <img [src]="item.avatar" (click)="likeImage(item.id)" [ngClass]="{'liked': item.liked}">
  </div>
</div>

您要做的是基于这样的CSS类添加一些样式。

img.liked {
  border-width: 5px;
  border-style: solid;
  border-color: green;
}

likeImage(item.id)方法应该是这样。

public likeImage(id: number): void {
    const likedItem: any = this.data.find((item) => {
      return item.id === id;
    });

    if(likedItem) {
        likedItem.liked = !likedItem.liked;
    }
  }

我创建了一个stackblitz。看看。

Answer 2

实现它的方法很少，但是由于您正在使用Angular，因此您可以做的就是传递索引并从TypeScript文件中进行更改，例如：

<!-- Here's your HTML File -->
<div class="col-sm-12">
   <ul>
      <li *ngFor="let item of items; index as i">
            <img src="{{ item.img }}" (click)="checkIcon(i)">
      </li>
   </ul>
</div>

// Here's your .ts File
checkIcon(index) {
  // You have the index here and by using it you can change your model data and view
  console.log(index);
}

您还可以使用ngClass或ngStyle属性来更改显示本身，例如背景或其他内容。希望这对您有所帮助...

基于角度4中的click事件基于id更改图像

2 个答案: