如何在 Angular2 中使用 *ngFor 将超链接添加到表的列

Question

我有一个包含 4 列名称、id、部门、城市的表，我将行数据和列数据作为来自打字稿文件的数组提供，并通过 *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>

我想提供一个指向第二列的所有行的超链接，即城市，这样如果我点击它，它应该导航到一个新页面以显示详细信息。我如何使用 *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>