如何从一个BehaviorSubject存储中获取不同的值，以在Angular中动态创建HTML标记？

Question

好吧，这很棘手，但我会非常感谢您的帮助。

我有一个动态创建的反应性表单，该表单从API调用获取其控件，因此我只是通过FormBuilder将这些控件添加到FormArray并生成了表单。

这是棘手的部分，这些控件的一种特定类型要求通过对较大选择的搜索来输入其值，而我正在使用Ionic进行开发，因此没有支持搜索的选择组件，因此在单击该FormControl时，用户被导航到另一个视图，该视图在列表中可供他搜索，在从列表中选择项目之后，我将其传递给BehaviorSubject存储，以导航回该表单并获取该值。漂亮又简单？好吧，问题是，如果API调用让我使用了该类型的多个控件，那么我从一个控制器的列表中选择值，向后导航，并将其反映到所有需要搜索的类型！

确定，请显示一些代码来显示我的意思：

这是动态创建的表单类型

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

如您所见，我在这里拥有[value]属性的一半解决方案。如果控制器名称匹配，则仅获得selectedLovData的值（即存储值）。这解决了将该值反映到所有那些控件的问题，它只更新了一个具有匹配名称的控件，而另一个则保留为空''

这是我将数据传递到此存储变量的方式

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

因此，总是在* ngFor内部自动生成的所有html标记都读取从API返回的相同值。不用说，整个过程是动态的，因此我无法确定将不会产生多少选择，这会带来一个问题，即所有人都看到相同的商店价值。我该如何处理？

Answer 1

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