Angular2 ngFor для развалин всегда одинаковые <tr>

Question

Новобранец веб-разработчик здесь.

Я использовал *ngFor для создания своего <tr data-toggle="collapse" data-target="#details">. Что я испытываю, так это то, что щелчок по строке всегда сжимает тот же div, а не тот, который соответствует ему.

Вероятно, должно быть что-то с тем, все они получают тот же идентификатор (?)

Что я делаю неправильно и как я могу добиться того, что я ищу?

КОД:

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

Заранее спасибо!

Answer 1

Я пытался играть с индексом текущего итерированного объекта и размещением его на data-target и для id складного <div> так:

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

Надеется, что это поможет кто-нибудь