Angular2で* ngForを使用してテーブルのカラムにハイパーリンクを追加する方法

Question

名前、ID、Dept、Cityの4つのカラムを持つテーブルがあり、タイプデータから配列として行データとカラムデータの両方を提供しています* ngForを繰り返し実行します。ここでは、コード

<tbody> 
    <tr *ngFor=let rowData of data | orderBy:convertSorting()> 
     <td *ngFor=let column of columns> 
      {{rowData[column.columnValue] | format:column.filter}} 
     </td> 
    </tr> 
</tbody> 

の私の作品があり、私はそれをクリックした場合、それは、詳細な情報を表示するには、新しいページに移動しなければならないように、第2の列すなわち市のすべての行へのハイパーリンクを提供したいです。 * ngForを使用してどのように達成できますか？

Answer 1

<tbody> 
    <tr *ngFor="let rowData of data | orderBy:convertSorting()"> 
     <td *ngFor="let column of columns; let idx=index"> 
      <span *ngIf="idx == 1"> 
       <a href="your-target-url">{{rowData[column.columnValue] | format:column.filter}}</a> 
      </span> 
      <span *ngIf="idx != 1"> 
       {{rowData[column.columnValue] | format:column.filter}} 
      </span> 
     </td> 
    </tr> 
</tbody> 

Answer 2

は活字体を経由して追加する方が簡単です：あなたの答えのための

<tbody> 
    <tr *ngFor=let rowData of data | orderBy:convertSorting()> 
     <td *ngFor=let column of columns> 
      {{rowData[column.columnValue] | format:column.filter}} 
     </td> 
    <td (click)="LinktoCity(column.city)">{{city}}</td> 

    </tr> 
</tbody> 

活字体

LinktoCity(city: string){   
     let mainLink = "www..." 
     window.open(mainLink+city); 
    }