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

Question

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

有点像……

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