angular 2+ 表格行详细信息功能答案

【问题标题】：angular 2+ table row details featureangular 2+ 表格行详细信息功能
【发布时间】：2019-11-20 23:21:09
【问题描述】：

我有 Angular 8 应用程序和表格：

<table>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of items">
            <td (click)="toggleDetails(item)">...</td>
            <td>...</td>
            ...
        </tr>
    </tbody>
</table>

<span id="details-row" *ngIf="expandedItem">
    <a (click)="convertFile(expandedItem.id, 'pdf')" class="pointer ml-3">
        <i class="far fa-file-pdf"></i> Download as PDF
    </a>
</span>

在我的 .ts 文件中：

toggleDetails(item: any) {
    this.expandedItem = item;
    //todo if row isn't clicked -> insert document.getElementById("details-row").innerHTML new table row after row I clicked and angular bindings must work (I mean click handler)
    //todo if this row is already clicked -> remove this new table row 
}

convertFile(id: number, format: string) {
    console.log(id);
    console.log(format);
}

我不能使用多个tbodys。

如何实现我的待办事项？或者还有其他方法可以实现吗？

【问题讨论】：

` //todo if row is not clicked -> insert document.getElementById("details-row").innerHTML new table row after I clicked and angular bindings must work (我的意思是点击处理程序) //todo 如果该行已经被点击 -> 删除这个新的表格行 ` 你想实现这个，对吗？
@Leandro 是的，你是对的

标签： angular html-table

【解决方案1】：

我已经建立了一个小的工作示例：

https://stackblitz.com/edit/angular-zsnqse?embed=1&file=src/app/app.component.html

【讨论】：

【解决方案2】：

尝试使用ng-container 迭代您的项目：

<ng-container *ngFor="let item of items"">
    <tr>
        <td (click)="toggleDetails(item)">...</td>
        <td>...</td>
        ...
    </tr>
    <tr id="details-row" *ngIf="expandedItem">...</tr>
</ng-container>

单击行时选择或取消选择项目：

toggleDetails(item: any) {
    this.expandedItem = item === this.expandedItem ? null : item;
}

【讨论】：