* ngFor mit Bootstrap Collapsible zeigen nur eine Daten

Question

Ich versuche, kollabierbar mit Bootstrap und Angular * ngFor Schleife Richtlinie zu machen. Aber es kollabiert nur die ersten Daten aus meiner Datenbank. Die Namen der Schaltflächen sind bereits korrekt, aber wenn ich auf sie klicke, werden bei jeder Schaltfläche nur der Inhalt der ersten Schaltfläche und die ersten Daten der Datenbank angezeigt. Sieht so aus, als hätte ich es nicht richtig gemacht, kann mir jemand helfen, das zu lösen?

<div class="container" *ngFor="let List of List"> 
 
    <a href="#List" class="btn btn-info" data-toggle="collapse">{{List.prdName}}</a> 
 
    <div id="List" class="collapse"> 
 
    <ul style="list-style: none"> 
 
     <li> {{List.prdName}}</li> 
 
     <li> {{List.prdCategory}}</li> 
 
     <li> {{List.prdSup}}</li> 
 
     <li> <img src="{{List.prdImage}}"></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

Der href Wert wahrscheinlich muss zeigen Sie auf eine einzigartige id. Sie können den Index für die ID verwenden. So etwas wie das:

<div class="container" *ngFor="let item of List; let i = index"> 
    <a href="#List-{{ i }}" class="btn btn-info" data-toggle="collapse">{{item.prdName}}</a> 
    <div id="List-{{ i }}" class="collapse"> 
    <ul style="list-style: none"> 
     <li> {{item.prdName}}</li> 
     <li> {{item.prdCategory}}</li> 
     <li> {{item.prdSup}}</li> 
     <li> <img src="{{item.prdImage}}"></li> 
    </ul> 
    </div> 
</div> 

Answer 2

Bitte geben Sie die Liste in ändern ngFor = "lassen Liste von List" zu Liste

Es

arbeiten kann