在表Angular2

Question

創建一個局部變量的每一行我在角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> 

刪除按鈕這下面的代碼將基於「德爾」的鼠標懸停行變量中。

我需要在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，你必須爲在其上你的鼠標移動到

設置爲true