Question

这是我的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)和(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"
    },
]

Answer 1

不要设置关注变量，请设置关注对象的属性（例如follow.following = true）

Answer 2

使用打字稿following: boolean向模型中添加属性，并在鼠标悬停/鼠标移出时对其进行切换

<button (mouseover)="follow.following = true" (mouseout)="follow.following = false" (click)="follow(id)">
      <span [hidden]="follow.following">Following</span>
      <span [hidden]="!follow.following">Follow</span>
    </button>

使* ngFor用于单个鼠标悬停和鼠标移出事件

2 个答案: