手风琴列表中的 Ng-For

Question

我有以下手风琴列表，它使用 ng repeat 用数据库中的数据填充页面，在页面加载时手风琴就在那里并且里面有数据但是如果我点击一个随机的第一个关闭，只有第一个可以打开和关闭。

<div class="bs-example">
    <div class="panel-group" id="accordion" *ngFor="let message of messages">
        <div class="panel panel-default" >
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">data
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                 data
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我认为是同一个 ID 造成的。尝试为 id

添加 index

<div class="bs-example">
    <div class="panel-group" [attr.id]="'accordion_' + i" *ngFor="let message of messages; let i = index;">
        <div class="panel panel-default" >
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" [attr.data-parent]="'#accordion_' + i" [attr.href]="'#collapseOne_' + i">{{ message.firstName }} {{ message.lastName }}</a>
                </h4>
            </div>
            <div [attr.id]="'collapseOne_' + i" class="panel-collapse collapse in">
                <div class="panel-body">
                  details here {{ message.empId }}
                </div>
            </div>
        </div>
    </div>
</div>

Demo

手风琴列表中的 Ng-For

Ng-For on a accordion list

ngfor

angular