Angular ngfor 中的折叠按钮

Question

我在 Angular 中的 table 中使用 Bootstrap 的折叠按钮，但是，当我单击第一个按钮时，第二个按钮也会随之显示。我试过这个名字，但没有用。我是初学者。

<tr *ngFor="let table of tables$ |
    async ; let i= index"
    class="hover-highlight">
    <td>
        <p>
            <button class="btn btn-primary"
                name="A"
                type="button"
                data-toggle="collapse"
                data-target="#collapseExample"
                aria-expanded="false"
                aria-controls="collapseExample">
                    Button with data-target
            </button>
        </p>
        <div class="collapse"
            id="collapseExample">
                <div class="card card-body">
                    <ngb-highlight
                        [result]="table.numsuivie"
                        [term]="service.searchTerm">
                    </ngb-highlight>
                </div>
        </div>
    </td>

Answer 1

这是因为您为两个按钮提供了相同的 ID。尝试为 data-target="#collapseExample" 中的每个按钮提供唯一 ID，并将相同的 ID 赋予下面的折叠属性 id="collapseExample" 在 div 标签中。

Answer 2

试试这个：

 <button class="btn btn-primary"
 type="button"
 data-toggle="collapse"
 aria-expanded="false"
 [attr.data-target]="'#collapseExample'+table.id"
 [attr.aria-controls]="'collapseExample'+ table.id">

Angular ngfor 中的折叠按钮

Angular collaps button in ngfor

angular

bootstrap-4

datatable

ngfor

collapse