Question

我的component.html中有以下代码。（我是角色的新手）

dataTable = Customsortedlist.AsDataView().ToTable();

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

Answer 1

您应该在{：1}}中指定：

*ngIf

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

这是一个想法，你如何指定：

第1步：向您的component.ts添加新变量

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

第2步：为您的ngFor

添加索引

currentItem: number;

第3步：扩展（鼠标悬停）和（鼠标移动）事件

添加*ngFor="let item of galleries; let index = index;"并填写数据。

currentItem

第4步：使用itemsCount

更改你的* ngIf

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

现在你有一个灵巧的解决方案。

Answer 2

我建议您在项目对象中创建一个额外的键，即 showCount 。

item = {
...,
showCount: false
}

使用该键在HTML中显示和隐藏showCount。

<div class="card" *ngFor="let item of galleries;"
       (mouseenter)=" setBackground(item?.image?.fullpath)"
       (mouseover)="item[showCount] = true; getImagesCount(item.path);"               
       (mouseleave)="item[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" [hidden]="item[showCount]">{{imagesCount}}</span>
                </div>
</div>

Answer 3

我会通过制作你的'showCount＆＃39;变量到数组中，并将* ngIf与数组值进行比较：

一些小调整：

<div class="card" *ngFor="let item of galleries; let idx=index">
    ....
    (mouseover)="showCount[idx]=true
    (mouseleave)="showCount[idx]=false
</div>

...
<span class="animated fadeInUp" *ngIf="showCount[idx]">

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

3 个答案: