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

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

这是我的桌子：

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

单位
接触
国家
细节
{{c.company}}
{{c.contact}}
{{c.country}

---

当我单击“详细信息”按钮时，需要在表中内联显示详细信息。这是剑道格网中的一种主细节格网方法。有没有更好的方法可以使用Angular2和typescript轻松显示细节？

您可以尝试以下方法：

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

单位
接触
国家
细节
{{c.company}}
{{c.contact}}
{{c.country}
细节在这里
更多细节
更多细节

您可以尝试以下方法：

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

单位
接触
国家
细节
{{c.company}}
{{c.contact}}
{{c.country}
细节在这里
更多细节
更多细节

与birwin的答案相比有一个小小的变化，因为没有指令，您不能在这里使用

模板

，所以请使用

ng容器

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

细节
{{c.company}}
{{c.contact}}
{{c.country}
细节

---

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

细节
{{c.company}}
{{c.contact}}
{{c.country}
细节

---

您可以在jsbin或JSFIDLE中创建工作示例吗？您可以在jsbin或JSFIDLE中创建工作示例吗？