如何在angular 2中单击表中的图标时显示额外的行？

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Actions</th>
  </tr>
  <tr *ngFor="let user of users">
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
    <td>
      <i class="fa fa-plus" (click)="showDetails(user)"></i>
    </td>
  </tr>
  <tr *ngIf="selectedUser">
    <td colspan="3">
      Additional details for {{ selectedUser.name }}: {{ selectedUser.details }}
    </td>
  </tr>
</table>

export class UserComponent {
  users: User[];
  selectedUser: User;

  showDetails(user: User) {
    this.selectedUser = user;
  }
}

table {
  width: 100%;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

i {
  cursor: pointer;
}