javascript - 如何使用 typescript 通过切换按钮显示 html 表的内联详细信息

Question

我需要为我的表格创建一个切换按钮(以显示/隐藏)所选行的更多详细信息。

鉴于这是我的 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 来轻松显示详细信息？

Answer 1

与 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