Question

我有一个包含4列的表--Name，id，Dept，City和我提供行数据和列数据作为打字稿文件中的数组并迭代* 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>

Answer 2

可能更容易通过TypeScript添加：

/^[a-zA-Z-,]+(\s{0,1}[a-zA-Z-, ])*$/;

<强>打字稿

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

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

2 个答案: