В таблице, где строки добавляются динамически, как сделать разные функции щелчка для каждой строки в Angular?

Question

У меня есть таблица, в которой строки добавляются динамически.

У меня есть массив в файле component.ts, и я использую * ngFor для этого массива, поэтому я получаю такое же количество строк, что и элементы массива.

Эти динамически добавленные строки доступны для нажатия. Щелчок по строке будет действовать как раскрывающийся список, поэтому под ней появится другая строка, а щелчок по той же строке, что и раньше, закроет этот раскрывающийся список, он свернется.

До того, как строки таблицы были добавлены динамически , Я сделал 10 разных строк, и у меня было 10 разных переменных «свернутые (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>

EDIT:

Вот версия с выпадающей строкой под выбранной строкой:

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