Question

我有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);
}

我不能使用多个tbody。

如何实施待办事项？还是有其他方法可以实现？

Answer 1

尝试使用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;
}

Answer 2

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

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

角度2+表格行详细信息功能

2 个答案: