我需要为我的表格创建一个切换按钮(以显示/隐藏)所选行的更多详细信息。
鉴于这是我的 table :
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr *ngFor='let c of companies'>
<td><button id="{{c.companyId}}" (click)="showDetail()">Details</button> </td>
<td>{{ c.company}}</td>
<td>{{ c.contact}}</td>
<td>{{ c.country }}</td>
</tr>
</table>
当我单击“详细信息”按钮时,需要在表格中内嵌显示详细信息。这是 Kendo Grid 中的一种主细节网格方法。有没有更好的方法使用 Angular2 和 typescript 来轻松显示详细信息?
最佳答案
与 birwin 的答案相比有一个小变化,因为如果没有指令,您无法在此处使用 template
,因此请使用 ng-container
代替。
<ng-container *ngFor='let c of companies'>
<tr>
<td><button id="{{c.companyId}}" (click)="c.details = !c.details">Details</button> </td>
<td>{{ c.company}}</td>
<td>{{ c.contact}}</td>
<td>{{ c.country }}</td>
</tr>
<tr *ngIf="c.details">
<td>Details</td>
</tr>
</ng-container>
Demo
关于javascript - 如何使用 typescript 通过切换按钮显示 html 表的内联详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43547312/