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

Question

好的，这个有点棘手，但我真的很感激你的帮助。

我有一个动态创建的响应式表单，它从 API 调用中获取控件，所以我只需通过 FormBuilder 将这些控件添加到 FormArray 中，然后生成表单。

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

好的，让我们展示一些代码来说明我的意思：

这是动态创建的表单类型

<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 返回的相同值。不用说，整个过程是动态的，所以我不知道会生成多少 select none，这就造成了所有人都看到同一家商店的问题价值。我该如何处理？

更新：

至于批准的答案，我发现 ionic-select能够解决我的问题。

这里的样式是为了根据您的需要select设置样式

我再次想出了如何控制由 Ionic Selectable 自动生成的 html 标记 :D 对于未来的读者，只需使用这种方法

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

在这个 ng-template 中，用你需要的任何样式呈现你想要的任何东西。

Answer 1

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

您可以使用 Ionic Selectable 而不是使用 ion-select，它可以让您自行搜索。我们在我们的应用程序中大量使用它并且非常可靠。此外，您还可以使用它执行完整的 CRUD。

我希望这对您创建动态表单有所帮助，因为您不必离开页面即可搜索，点击 API 并分配值。

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

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

behaviorsubject

ionic-framework

angular