Я хочу показать поповер на каждой кнопке строки в таблице HTML для отображения конкретных данных строки, но я сталкиваюсь с проблемой, заключающейся в том, что, когда имеется много строк и я нажимаю кнопку, отображаются все всплывающие окна.Я использую 'ng-zorro-antd' для всплывающих окон и ng-template для показа моего шаблона данных.Если кто-нибудь может мне помочь.
`<td>
<div>
<button style="width: 100%;"
class="btn btn-sm btn-primary text-
light"
nz-button
nzPlacement="left"
nzType="default"
nz-popover
nzTitle="Add Details"
[(nzVisible)]="visible3"
nzTrigger="click"
[nzContent]="detailsTemplate">
Add Details <i class="fa fa-arrow-down">
</i>
</button>
<a data></a>
</div>
<ng-template #detailsTemplate>
<div class="mb-2">
<input style="text-align:center;"
placeholder="Enter Mfg Date"
class="table-input"
formControlName="mfgDate"
name="description"
type="date">
</div>
<div class="mb-2">
<input style="text-align:center;"
placeholder="Enter Expiry Date"
class="table-input"
formControlName="expiryDate"
name="description"
type="date">
</div>
<div class="mb-2">
<input style="text-align:center;"
placeholder="Batch No."
class="table-input"
formControlName="batchNumber"
name="batchNumber"
type="number">
</div>
<div class="mb-2">
<input style="text-align:center;"
placeholder="Serial No."
class="table-input"
formControlName="serialNumber"
name="serialNumber"
type="number">
</div>
<div class="mb-2">
<input style="text-align:center;"
placeholder="Mfg-Part No."
class="table-input"
formControlName="mfgPartNo"
name="mfgPartNo"
type="number">
</div>
<div class="mb-2">
<input style="text-align:center;"
placeholder="Shelf Location"
class="table-input"
formControlName="shelfLocation"
name="shelfLocation"
type="text">
</div>
</ng-template>
</td>
`
Когда я нажимаю любую кнопку строки, она показывает все всплывающие окна