gpt4 book ai didi

javascript - Angular ngFor - 限制显示在每个项目上

转载 作者:行者123 更新时间:2023-11-30 09:28:18 28 4
gpt4 key购买 nike

我的 component.html 中有以下代码。 (我是 Angular 新手)

<div class="card" *ngFor="let item of galleries;"
(mouseenter)=" setBackground(item?.image?.fullpath)"
(mouseover)="showCount = true; getImagesCount(item.path);" (mouseleave)="showCount = false">
<img class="card-img-top" [routerLink]="['/'+item.path]"
[src]="item?.image?.fullpath ? path + '0x156/' + item?.image?.fullpath : defaultImage"
alt="Card image cap">
<div class="card-block">
<h4 class="card-title imagesCount"></h4>
<h4 class="card-title title">{{item.name}}</h4>
<img class="closeIcon" src="../../../assets/images/close.png" alt="" (click)="removeGallery(item);">
<span class="animated fadeInUp" *ngIf="showCount">{{imagesCount}}</span>
</div>
</div>

在代码中,我有 *ngIf="showCount,我试图显示画廊有多少图片。但问题是它显示在每张卡片上, 但我希望它只显示在我输入鼠标的当前卡上。

最佳答案

您应该在以下位置指定您的*ngIf:

<span class="animated fadeInUp" *ngIf="showCount">{{imagesCount}}</span>

因为实际上您将获得画廊列表中的每个项目。

这是一个想法,您可以如何指定它:

第 1 步:将新变量添加到您的 component.ts

currentItem: number;

第 2 步:将索引添加到您的 ngFor

*ngFor="let item of galleries; let index = index;"

第 3 步:扩展您的 (mouseover) 和 (mouseleave) 事件

添加currentItem并填充数据。

(mouseover)="showCount = true; currentItem = index; getImagesCount(item.path);" 
(mouseleave)="showCount = false; currentItem = null;"

第 4 步:将 *ngIf 更改为带有 itemsCount 的 span

<span class="animated fadeInUp" *ngIf="showCount && currentItem == index">{{imagesCount}}</span>

现在您有了一个具体的解决方案。

关于javascript - Angular ngFor - 限制显示在每个项目上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48008378/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com