Question

我正在尝试在我的角度应用程序中实现一个简单的“悬停在注释上以显示回复按钮”实现。有没有办法通过仅使用模板引用变量来实现这种效果？

有些事情......

<mat-list>
  <mat-list-item *ngFor="let comment of comments" #SomeRefToThisParticularElement (mouseenter)="SomeRefToThisParticularElement=true" (mouseleave)="SomeRefToThisParticularElement=false">
    <h4>{{comment.text}}</h4>
    <p> 3 replies </p>
    <mat-icon *ngIf="SomeRefToThisParticularElement==true">reply</mat-icon>
  </mat-list-item>
</mat-list>

显然，上面的方法不起作用，因为angular不会让你按照我在上面的代码片段中显示的方式分配或设置模板变量。但我想探讨在html模板级别实现此目的的选项。

这是一个很好的方法吗？

修改点击here获取可能的解决方案摘要。

Answer 1

试试这个，根据数组的悬停索引隐藏和显示。

<mat-list>
    <mat-list-item *ngFor="let comment of comments; let i = index" (mouseenter)="commentIndex= i" (mouseleave)="commentIndex = -1">
        <h4 mat-line>{{comment.text}}</h4>
        <p mat-line style="font-size:x-small; color:rgba(0, 0, 0, 0.54)"> 3 replies </p>
        <mat-icon *ngIf="commentIndex == i">reply</mat-icon>
    </mat-list-item>
</mat-list>

Answer 2

使用动态对象执行此操作，例如comment.isVisible。现在isVisible对象是动态创建的，它将在悬停进/出时修改该值。

请尝试这种方式

<mat-list>
  <mat-list-item *ngFor="let comment of comments" (mouseenter)="comment.isVisible = true" (mouseleave)="comment.isVisible= false" >
    <h4 mat-line >{{comment.text}}</h4>
    <p mat-line style="font-size:x-small; color:rgba(0, 0, 0, 0.54)"> 3 replies </p>
    <mat-icon *ngIf="comment.isVisible">reply</mat-icon>
  </mat-list-item>
</mat-list>

Answer 3

Simplest Solution（Credit：Rahul Sharma） - 使用元素的索引并将其设置为* ngIf语句中用于显示/隐藏行为的动态变量的值一个元素。
Next Best Solution（Credit：Ramesh Rajendran） - 向可迭代对象添加动态属性。这假设可迭代对象不是不可变的。

感谢各自的贡献者。希望这可以帮助将来的某个人。

Answer 4

你可以使用css：

mat-icon{
    color: transparent;
} 
mat-icon:hover, mat-icon:active{
    color:black;
}

Angular4 +在HTML模板中显示/隐藏子元素

4 个答案: