在动态添加行的表中，如何为 Angular 中的每一行创建不同的点击功能？

Question

我有一个表，它的行是动态添加的。

我在 component.ts 文件中有一个数组，我在该数组上使用 *ngFor，所以我得到了与数组元素相同的行数。

那些动态添加的行是可点击的。单击该行将起到下拉菜单的作用，因此其下方会出现另一行，然后单击与之前相同的行，将关闭该下拉菜单，它将折叠。

在动态添加表格行之前，我为每个点击事件创建了 10 个不同的行，并且我有 10 个不同的“collapsed(1-2-3....)”变量。然后，每一行的下拉菜单都起作用了。 在动态添加行之后，以前的解决方案显然不起作用。单击一行后，所有行都以相同的方式执行（因为我使用的是一个变量）。

您能帮我修复它或告诉我如何修复它吗？ :)

<table class="table col-12">
    <tr class="d-flex col-12 clickable" (click)="collapsed=!collapsed" *ngFor="let log of logList">
        <td class="col-1">
            <i class="material-icons" *ngIf="!collapsed" aria-hidden="true">
                keyboard_arrow_down
            </i>
            <i class="material-icons" *ngIf="collapsed" aria-hidden="true">
                keyboard_arrow_right
            </i>
        <td>
        <td class="col-1">
            {{log.time}}
        </td>
        <td class="col-3">
            {{log.text}}
        </td>
        <td class="col-7">
            <!-- JSON file displayed-->
        </td>
    </tr>
    <tr class="d-flex col-12" *ngIf="!collapsed">
        <!-- dropdown row-->
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

单击行，也会更改第一列中的图标。

Answer 1

您可以在组件上添加一个属性来存储所选项目。在您的 HTML 中，您可以根据所选项目展开/折叠行。然后用所选项目的数据填充下拉行。

在你的组件 ts 中：

public selectedLog: any;

在您的 html 中：

<table class="table col-12">
    <tr class="d-flex col-12 clickable" *ngFor="let log of logList" (click)="log == selectedLog ? selectedLog = null : selectedLog = log">
        <td class="col-1">
            <i class="material-icons" *ngIf="!selectedLog == log" aria-hidden="true">
                keyboard_arrow_down
            </i>
            <i class="material-icons" *ngIf="selectedLog != log" aria-hidden="true">
                keyboard_arrow_right
            </i>
        <td>
        <td class="col-1">
            {{log.time}}
        </td>
        <td class="col-3">
            {{log.text}}
        </td>
        <td class="col-7">
            <!-- JSON file displayed-->
        </td>
    </tr>
    <tr class="d-flex col-12" *ngIf="selectedLog != null">
        {{selectedLog.whateverProperty}}
        <!-- dropdown row-->
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

编辑：

这是所选行下方带有下拉行的版本：

<table class="table col-12">
    <ng-container *ngFor="let log of logList">
        <tr class="d-flex col-12 clickable" (click)="log == selectedLog ? selectedLog = null : selectedLog = log">
            <td class="col-1">
                <i class="material-icons" *ngIf="!selectedLog == log" aria-hidden="true">
                    keyboard_arrow_down
                </i>
                <i class="material-icons" *ngIf="selectedLog != log" aria-hidden="true">
                    keyboard_arrow_right
                </i>
            <td>
            <td class="col-1">
                {{log.time}}
            </td>
            <td class="col-3">
                {{log.text}}
            </td>
            <td class="col-7">
                <!-- JSON file displayed-->
            </td>
        </tr>
        <tr class="d-flex col-12" *ngIf="selectedLog == log" colspan="4">
            {{selectedLog.whateverProperty}}
            <!-- dropdown row-->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </ng-container>
</table>