How to get different values from one BehaviorSubject store for a dynamically created HTML markup in Angular?

Ok this one is quite tricky, but I'll really appreciate the help.

I have a dynamically created reactive form that gets its controls from an API call, so I just add these controls to a FormArray through a FormBuilder and the form is generated.

Here's the tricky part, one specific type of these controls requires its value to be entered through a search on a large selection and I'm using Ionic to develop so there's no select component that supports search, so upon clicking on that FormControl, the user is navigated to another view that loads the list where he can search, after selecting the item from the list, I pass it to a BehaviorSubject store to navigate back to the form and get this value. Nice and simple? Well the problem is if the API call gets me multiple controls that use this type, so I select the value from the list for one controller, navigate back and it's reflected to all those types that require the search!

Ok lets show some code to show what I mean:

Here's the dynamically created form type

<div *ngIf="oneSit[i]?.HAS_LIST === 'Y' && oneSit[i]?.VALIDATION_TYPE === 'I'">
          <ion-item class="img-item">
            <ion-input [value]="selectedLovData?.name === oneSit[i]?.SEGMENT_NAME ? selectedLovData?.value : ''" [formControlName]="i"></ion-input>
            <span (click)="navigateToLovData(oneSit[i]?.SEGMENT_NAME, oneSit[i]?.FLEX_VALUE_SET_ID)" class="icn"
              slot="end"><img src="assets/imgs/Asset 8.svg" alt="" /></span>
          </ion-item>
</div>

As you can see, I had half the solution of the [value] property here. It only get's the value of the selectedLovData (which is the store value) if the name of the controller matches. This solves the problem of this value being reflected to ALL those controls, it only updates the one with the matched name, and the other are left empty ''

Here's how I pass the data into this store variable

selectedData(event: any) {
    this.share.assignSitLovData({
      name: this.sitName,
      value: event.target.value
    });
    this.location.back();
}

So always all the html markup that is generated automatically inside an *ngFor reads the same value returned from the API. And it goes without saying that the whole process is dynamic so I have no hold of how many selects will be generated none whatsoever, and this creates the problem of all of them getting to see the same store value. How can I approach this?

Update:

As for the approved answer, I found the ionic-selectable to solve my issue.

And this here is for styling this selectable to your needs

I figured out how to control the html markup generated automatically by the Ionic Selectable myself, again :D For future readers, just use this approach

<ionic-selectable>
  <ng-template ionicSelectableItemTemplate let-port="item"
    let-isPortSelected="isItemSelected">
    {{port.name}} ({{port.country.name}})
  </ng-template>
</ionic-selectable>

And inside this ng-template, render whatever you want with whatever style you need.

Solution

https://www.npmjs.com/package/ionic-selectable

Instead of using ion-select you can use Ionic Selectable which gives you the power to search there itself. We use this heavily in our application and is quite reliable. In addition you can perform full CRUD with this.

I hope this helps you in your dynamic form creation as you do not have to leave the page to search, hit the API and assign the value.