Angular collaps button in ngfor

Question

I'm using collapse button of Bootstrap in my table in Angular, however, when I click the first button the second button also displays with it. I tried the name but it didn't work. I'm a beginner.

<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

Try this :

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