Question

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

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

我看到了另一个stackoverflow答案，他们只是应用了这个名字   在for循环中（例如：*ngFor="let article of articles"和它们   在他们设置的布尔/变量前面使用article）。   就像我的布尔值favorite一样，所以他们在article.favorite内做了<div class="row">  <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>    元素和它显然有效，但该方法不起作用   我。

代码：

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;
    }
  }

}

添加组件

=IF(MID(CELL("filename",A1),FIND("]",CELL("filename",A1))+1,255)*1=DAY(Main!B2),VLOOKUP(A1,Main!A1:C11,3,FALSE),NA())

Answer 1

您可以使用索引

 *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"

Answer 2

您未获得所需结果的原因是因为在ArticlesComponent中定义了您的布尔变量，而ArticleComponent是呈现文章列表的组件。因此，如果变量变为真，则所有文章都是如此，而不是单个文章。要修复它，你应该将ngFor循环中的所有内容定义为它自己的组件，并在该组件中设置那些布尔变量。这样，ArticleComponent的每个实例都有自己的变量，它们不会相互干扰。

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

2 个答案: