ngfor中的角度折叠按钮

问题描述

您好，我在桌子上使用bootstrap的collapse按钮折叠成角形时，但是当我单击第一个按钮时，第二个按钮也显示了它，我尝试了该名称，但对于初学者却没有用。

<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>

解决方法

尝试一下：

 <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">

,

这是因为您为两个按钮都提供了相同的ID。 尝试为 data-target =“＃collapseExample” 中的每个按钮提供唯一的ID，并将相同的ID赋予div标签中的以下折叠属性 id =“ collapseExample” 。 / p>