Question

我正在尝试在Angular2中列出可扩展数据。我正在使用* ngFor循环迭代数据并以成对的标头和可扩展的div显示它以显示该行的更多数据。标题包含两个列值和一个用于查看详细信息的按钮。可扩展的div最终本身就是一个标签组件，但是现在我只是尝试在按钮点击时为每一行扩展div。

目前，单击列表中的第一个“查看详细信息”按钮将打开其相应的可扩展div，但其他行上的按钮不会打开其可扩展部分。我正在使用Bootstrap折叠功能。

<div id="accordion">
    <div *ngFor="let row of data$ | async; let i=index">
        <div class="row">
            <div class="col-md-4">
                <p>{{ row.dateTime }} </p>
            </div>
            <div class="col-md-4">
                <p>{{ row.source }} </p>
            </div>
            <div class="col-md-4 text-right">
                <button class="btn btn-default" 
                        data-toggle="collapse" 
                        [attr.data-target]="'#' + i" 
                        data-parent="#accordion"
                        (click)="whatsGoingOn(i)">See details</button>
            </div>
        </div>
        <div class="collapse" [attr.id]="i">
            {{row.exceptions}}
        </div>
    </div>
</div>

我想知道我是如何使用[attr.data-target]和/或[attr.id]的？

在Angular2中使用bootstrap和* ngFor的可扩展元素列表

0 个答案: