Question

我在Angular 1.4中有以下代码

<tr ng-if="alerts.length > 0" ng-repeat="alert in alerts" ng-mouseover="del=true" ng-mouseleave="del=false">
  <td ng-bind="alert.name"></td>
  <td ng-bind="alert.desc"></td>
  <td ng-bind="alert.moduleType"></td>
  <td ng-bind="alert.triggerType"></td>
  <td>{{alert.alertActionType}}
        <a href="" ng-click="deleteAlert(alert);" tooltip-placement="right" tooltip="Delete" class="pull-right glyphicon glyphicon-trash" ng-show="del"></a>
  </td>
</tr>

删除按钮将根据鼠标悬停行的'del'变量显示。

我需要在Angular 2中实现相同的目标。截至目前，我尝试了以下代码。

<tr *ngFor="let alert of alerts" let del="false" (mouseover)="del=true" (mouseleave)="del=false">
  <td>{{alert.name}}</td>
   <td>{{alert.desc}}</td>
   <td>{{alert.moduleType}}</td>
   <td>{{alert.triggerType}}</td>
   <td>{{alert.alertActionType}}
      <a href="" (click)="deleteAlert(alert);" class="pull-right glyphicon glyphicon-trash" *ngIf="del"></a>
   </td>
</tr>

但是鼠标悬停时会显示所有行的删除按钮。
需要帮助。

Answer 1

试试这个

<tr *ngFor="let alert of alerts" let del="false" (mouseover)="alert.del=true" (mouseleave)="alert.del=false">
  <td>{{alert?.name}}</td>
   <td>{{alert?.desc}}</td>
   <td>{{alert?.moduleType}}</td>
   <td>{{alert?.triggerType}}</td>
   <td>{{alert?.alertActionType}}
      <a href="" (click)="deleteAlert(alert);" class="pull-right glyphicon glyphicon-trash" *ngIf="alert?.del"></a>
   </td>
</tr>

因为您在鼠标悬停时将局部变量del指定为true，对于循环中的所有人都是如此，您必须将鼠标设置为on的真实值

使用Angular2为表中的每一行创建一个局部变量

1 个答案: