如何在 *ngFor 中停止属性绑定到 Angular 中的每个元素

在我的 html 中，我想将属性绑定应用于每个元素。

我有一个点击和悬停事件，每当用户 将鼠标悬停或单击单个元素。但现在悬停或 单击发生在其中的每个元素上*ngFor。我想要它只 发生在他们选择/悬停的元素上。我需要什么 改变？

我看到了另一个 stackoverflow 答案，他们只是应用了这个名字 在 for 循环内（例如：*ngFor="let article of articles"和他们 用过的article）在他们设置的布尔值/变量前面。 就像我的布尔值一样favorite所以他们做到了article.favorite之内 该元素并且它显然有效，但该方法不适用于 我。

Code:

<div class="row">
  <!--/span-->
  <div class="col-6 col-sm-6 col-lg-4"
       *ngFor="let article of articles">
    <h2>{{article.title}}</h2>
    <h4>By: {{article.author}}</h4>
    <p>{{article.body}}</p>
    <div class="col-lg-4">
      <button type="button" class="btn btn-default" (click)="addFavorite()"
              (mouseenter)="hoverFavorite()"
              (mouseleave)="removeHoverFavorite()">
      <span
        class="glyphicon"
        [class.glyphicon-heart]="favorite"
        [class.glyphicon-heart-empty]="!favorite"
        aria-hidden="true"></span> Favorite
      </button>
    </div>
    <div class="col-lg-4">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Comment
      </button>
    </div>
    <div class="col-lg-4">
      <button type="button" class="btn btn-info pull-left" [routerLink]="['/articles', article.articleId]">Read More »
      </button>
    </div>
  </div>
</div>
<!--/row-->

添加组件

import { Component, OnInit } from '@angular/core';
import {ArticlesService} from "./articles.service";
import {Article} from "./article.model";
import {Router} from "@angular/router";

@Component({
  selector: 'app-articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.css']
})
export class ArticlesComponent implements OnInit {
  articles: Article[];
  // if favorite = false then full heart is not shown. if true then heart shown
  favorite: boolean = false;
  // clicked will be used to determine if we should keep hovering effect on
  clicked: boolean = false;

  constructor(private router: Router, private articleService: ArticlesService) { }

  ngOnInit() {
    this.articleService.getArticles()
        .subscribe(
            (articles: Article[]) => {
              this.articles = articles;
            }
        );
  }

  addFavorite(){
    // toggle full and empty heart
    this.clicked = !this.clicked;
    if (this.clicked === true){
      // if clicked then add to database and show full heart
      this.favorite = true;
    } else { // if false then remove from database and show empty heart
      this.favorite = false;
    }
  }
  hoverFavorite(){
    // if clicked is false then show hover effect, else dont
    if (this.clicked === false){
      this.favorite = true;
    }
  }
  removeHoverFavorite(){
    // if clicked is false then show hover effect, else dont
    if (this.clicked === false){
      this.favorite = this.favorite = false;
    }
  }

}

您可以使用索引

 *ngFor="let article of articles; let i=index"

(click)="addFavorite(i)"
// or
(click)="addFavorite(article)"

(mouseenter)="hoverFavorite = i"
(mouseleave)="hoverFavorite = -1"

[class.glyphicon-heart]="favorite === i"
[class.glyphicon-heart-empty]="favorite !== i"