可选择的表格行并将选择信息传递给新组件

Question

我有一个带有表格的 Angular 4 组件，如下面的代码所示。我想让每一行都可以点击以打开一个 angular2-modal https://github.com/shlomiassaf/angular2-modal，其中包含所选行（诊所）的详细信息。我是 Angular 的新手，我不知道如何将点击行（诊所）的信息传递给大概是新组件，以及如何首先使这些行可点击。 奖励将是表格中的漂亮悬停效果;-)

<tbody *ngIf="!isEditing">
    <tr *ngFor="let clinic of clinics">
      <td><b>{{clinic.clinicCode}}</b><br>
      <font size="-2">Last Update: <br>
      {{clinic.lastUpdate | date:'yyyy-MM-dd hh:mm a' : 'UTC' }}</font></td>
      <td>{{clinic.clinicName}}</td>
      <td>{{clinic.street}}</td>
      <td>{{clinic.zip}}</td>
      <td>{{clinic.town}}</td>
      <td>{{clinic.countryCode}}</td>
      <td>
        <button class="btn btn-sm btn-warning" (click)="enableEditing(clinic)"><i class="fa fa-pencil"></i> Edit</button>
        <button class="btn btn-sm btn-danger" (click)="deleteClinic(clinic)"><i class="fa fa-trash"></i> Delete</button>
      </td>
    </tr>
  </tbody>

Answer 1

从奖金开始，最简单：

CSS：

td:hover{
   background-color:red;
   color:white
}

HTML

1.更改按钮标记如下：

<button class="btn btn-sm btn-warning" (click)="enableEditing(clinic)"><i class="fa fa-pencil"></i> Edit</button>

因此您可以在 enableEditing() 中获取“clicnic”对象。

2.也可以通过

获取每一个的id

<tr *ngFor="let clinic of clinics; let i=index">

其中 i 确实是索引。你可以这样做

<button class="btn btn-sm btn-warning" (click)="doSomething(i)"><i class="fa fa-pencil"></i> Edit</button>  

打字稿

doSomething(id){
   console.log(clinics[id]);
}

在新组件中，您将需要@Input 来获取“诊所”对象/信息。