選択可能な表の行と新しいコンポーネントへの選択情報の受け渡し

Question

次のコードのようにテーブルを含む角4のコンポーネントがあります。選択した行（クリニック）の詳細情報を持つangular2-modal https://github.com/shlomiassaf/angular2-modalを開くために、すべての行をクリック可能にしたいと考えています。私は角度が新しく、おそらく新しいコンポーネントに行（クリニック）がクリックされたときの情報とその行を最初にクリック可能にする方法を知らない。 ボーナスは、ボーナスを皮切り;-)

<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

表にeasyestかなりホバー効果のようになります。

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.Youはまた、私が実際にインデックスされ

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

によってそれぞれのIDを取得することができます。そして、あなたは

<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が必要になります。