Angular 2-引导程序-崩溃

Question

My question is, that how can I create own id for all collapse item ?

The problem is that if I click somewhere in the list always the first item gets collapsed. I try to give the div the data.id, but it doesn't works as well.

<div class="container">
<div *ngFor="let data of data.data">
  <div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#{data.id}}">{{data.subject}}</a>
      </h4>
    </div>
    <div id="{data.id}}" class="panel-collapse collapse">
      <div class="panel-body">{{data.id}}</div>
      <div class="panel-footer">{{data.name}}</div>
    </div>
  </div>
</div>
</div>
</div>

Answer 1

There is a mistake in below line .

 <a data-toggle="collapse" href="#{data.id}}">{{data.subject}}</a>

and this line :

<div id="{data.id}}" class="panel-collapse collapse">

Curly bracket is missing here href="#{data.id}} and here id="{data.id}}"