时间戳

首页 > 解决方案 > 使 *ngFor 为单独的 mouseover 和 mouseout 事件工作

angular - 使 *ngFor 为单独的 mouseover 和 mouseout 事件工作

问题描述

这是我的 Angular 代码：

<div *ngFor="let follow of followers;">
  <div>{{follow.name}}</div>
  <div>
    <button (mouseover)="myFollow=true" (mouseout)="myFollow=false" (click)="follow(id)">
      <span [hidden]="myFollow">Following</span>
      <span [hidden]="!myFollow">Follow</span>
    </button>
  </div>
</div>

这是输出：

Joe1 Following
Joe2 Following
Joe3 Following
Joe4 Following

当我将鼠标悬停在第一行上时，所有行都变为：

Joe1 Follow
Joe2 Follow
Joe3 Follow
Joe4 Follow

它应该只改变第一行，如下所示：

Joe1 Follow
Joe2 Following
Joe3 Following
Joe4 Following

如何使(mouseover)and(mouseout)为单个行工作？

这是我对应的 .ts 文件

public followers = [] as [{follow_data?: any}];
export class FollowingComponent OnInit {
  myFollow: boolean;
  constructor() {
    this.myFollow = false;
  }

下面是 JSON 的样子：

"followers": [
    {
        "follow_data": {
            "name": "joe1",
            "id": "863cf135-8105-0d0df0e1c101"
    },
    {
        "follow_data": {
            "name": "joe2",
            "id": "863cf135-8105-0d0df0e1c102"
    },
    {
        "follow_data": {
            "name": "joe3",
            "id": "863cf135-8105-0d0df0e1c103"
    },
    {
        "follow_data": {
            "name": "joe4",
            "id": "863cf135-8105-0d0df0e1c104"
    },
]

标签： angular

解决方案

不要设置follow var，设置follow的一个属性（例如follow.following = true）

推荐阅读