Popover angular 2，bootstrap 4

Question

我正在渲染下面的文本框动态地，我想为每个文本框打开弹出窗口，并且一次只能打开一个弹出窗口。

这是渲染文本框和弹出窗口的标记

<!-- for rendering dynamic fields -->
<div>
<div *ngFor="let field of fieldsInfo">
<div class="form-group">
   <label class="required" for="field?.FieldName">{{field?.DisplayName}}</label>
   <input [type]="text" [id]="field?.FieldName" class="form-control" [formControlName]="field?.FieldName" [ngModel]="field?.Value" />
   <template #popContent></template>
   <button type="button" id="{{field?.FieldName}}" class="btn btn-secondary" (click)="openPopover(field.FieldName)" [ngbPopover]="field?.FieldName" popoverTitle="Popover" #p="ngbPopover" placement="right" triggers="manual">open
   </button>
 </div>
 </div>
 </div>

这是打字稿代码

export class PopoverComponent {

    @ViewChild('p') public popover: NgbPopover;

    openPopover(data: any){
        this.popover.open(data);
    }
    
    }

问题是，当我点击任何打开的按钮，只显示第一个文本框的弹出框并且无法打开其他弹出窗口时，你能告诉我为了使这个做出什么代码更改吗？功能工作