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

【问题标题】：How to add hyperlink to the column of a table using *ngFor in Angular2如何在 Angular2 中使用 *ngFor 将超链接添加到表的列
【发布时间】：2017-06-21 05:16:01
【问题描述】：

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

【问题讨论】：

标签： html angular hyperlink

【解决方案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>

【讨论】：

感谢您的回答。如何在特定条件下禁用超链接？即。这里 showLink 是一个布尔值，如果为 false，则应显示 id 但不显示超链接
在你的组件中定义 showLink，然后你可以在你的视图中使用它:)。
我已经在我的组件中定义了它，它的值相应地改变了真/假，如果它是假的，我想让超链接不可点击。我该怎么做？
stackoverflow.com/questions/28318057/html-how-to-disable-a-href -- 使用 CSS 使其无法点击，然后使用 ngClass 和您的 showLink angular.io/docs/ts/latest/api/common/index/… 将类动态应用到链接

【解决方案2】：

可能更容易通过 TypeScript 添加：

<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>

TypeScript

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

【讨论】：