如何使用打字稿通过切换按钮显示html表的内联详细信息

Question

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

鉴于这是我的桌子：

<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和打字稿以简单的方式显示细节？

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>

演示

Answer 2

您可以尝试这样的事情：

<table>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <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 go here</td>
            <td>More details</td>
            <td>More details</td>
        </tr>
    </ng-container>
</table>