CODEWITHSUNDEEP
jqueryangularangularjsngfor
Kesem David
Kesem David

Reputation: 2225

Angular2 ngFor collapses always the same <tr>

A rookie web developer here.

I used *ngFor to create my <tr data-toggle="collapse" data-target="#details">. What i experience is that clicking on a row always collapses the same div and not the one matching to it.

Probably has to be something with the fact they all get the same id (?)

What am i doing wrong and how can I achieve what I'm looking for?

CODE:

<template let-transaction ngFor [ngForOf]="accountTransactions">
    <tr data-toggle="collapse" data-target="#details">
        <td>{{transaction.time}}</td>
        <td>{{transaction.description}}</td>
        <td>{{transaction.amount}}</td>
        <td>{{transaction.currency}}</td>
    </tr>
    <div class="container collapse" id="details">

Thanks in advance!

Upvotes: 1

Views: 1325

Answers (1)

Kesem David
Kesem David

Reputation: 2225

I have tried playing with the index of the current iterated object and placing it for the data-target and for the id of the collapsible <div> like that:

<template let-transaction ngFor [ngForOf]="accountTransactions" let-i="index">
    <tr data-toggle="collapse" [attr.data-target]="'#'+i">
        <td>{{transaction.time}}</td>
        <td>{{transaction.description}}</td>
        <td>{{transaction.amount}}</td>
        <td>{{transaction.currency}}</td>
    </tr>
    <div class="container collapse" [attr.id]="i">

Hope it'll help somebody

Upvotes: 3

Related Questions