マウスを押すと、すべてのプロジェクト名にアイコンが表示されます

私はmouseenterに問題があります。マウスを動かすとそのプロジェクト名のアイコンが表示されますが、私にとってはすべてのプロジェクトに表示されます。私は各プロジェクトホバードショー私のアイコンをしたいマウスを押すと、すべてのプロジェクト名にアイコンが表示されます

ここにいくつかのコードがあります。これは.TS

showIcons(project: Project) { 
this.isIconsVisible = !this.isIconsVisible;

これはHTMLである

<td (mouseenter)="showIcons()" (mouseleave)="showIcons()"> 
{{project.name}} 
<div class ="row" *ngIf="isIconsVisible"> 
<div class="fa fa-edit clickable edit-icon" (click)="editProject()"> 
</div> 
<div class="fa fa-pencil clickable fa-fw" 
(click)="openprojecteditdialog(project)"></div> 
<div class="fa fa-trash-o clickable delete-icon" 
(click)="deleteProject(project)"></div> 
<div class="fa fa-files-o clickable copy-item" 
(click)="copyProject(project)"></div> 
</div>

出典

2017-11-30 Anonymous

問題は、すべてのプロジェクトの一つの変数（isIconsVisible）を使用しているということです。あなたがしたいことは、各プロジェクトのプロパティとしてatac isIconsVisibleを設定し、それを使用することです。私は、これは動作しませんでした試みたが、どのような方法は、あなたに感謝あなたはproject.isIconsVisible = !this.isIconsVisible;

出典

2017-11-30 09:38:44 Alex

ありがとうございましたが、私はいくつかの変更を加えましたが、これはとても役に立ちました –

それはあなたがshowIcons機能でプロジェクトに入れるのを忘れていることだろうか？

<td (mouseenter)="showIcons(project)" (mouseleave)="showIcons(project)">

私も角度の専門家ではないよ...

出典

2017-11-30 09:28:33 Brainfeeder

を使用できるように別の方法として、開始時にfalseにすべてproject.isIconsVisibleを初期化

showIcons(project: Project) { if(!project.isIconsVisible) { // This will also check if the property is null project.isIconsVisible = true; } else { project.isIconsVisible = false; } // project.isIconsVisible = !this.isIconsVisible;

機能

<td (mouseenter)="showIcons()" (mouseleave)="showIcons(project)"> {{project.name}} <div class ="row" *ngIf="project.isIconsVisible"> <div class="fa fa-edit clickable edit-icon" (click)="editProject()"> </div>

そして、あなたのshowIconsお時間を頂きまして。 –

マウスを押すと、すべてのプロジェクト名にアイコンが表示されます

答えて

関連する問題