如何将来自数据库的数据绑定到角度动态表单下拉列表中？

Question

我正在创建Angular7动态表单，此表单包含一个下拉列表。 该下拉菜单具有options属性。 我想从数据库中填充此属性。 但是在正式的Angular Dynamic Form文档中，值会在创建输入时插入options属性。

我尝试了这个：

this.formComponent.form.controls['currencyId'].patchValue([{value: '076398a7-ea74-431c-9c63-121af6fe0f2f', label: 'deneme'}]);

new InputDropdown({
  key: 'parentJobDepartmentId',
  label: '...',
  options: [],
  value: '...',
  required: false,
  order: 2
})

我正在使用ng-select库进行下拉。

<ng-select [ngClass]="'ng-select'" [options]="input.options" [formControlName]="input.key" [id]="input.key" (change)="input.onChange($event.target.value)"></ng-select>

我需要动态填充InputDropdown.options属性（从数据库中）。

我怎样才能做到这一点？ 您能帮我解决这个问题吗？

Answer 1

如果您不希望从数据库中不断更新这些值，那么我建议分阶段构建表单，并在准备好后仅将选项分配给表单组件。

您可以为此使用forkJoin 。

forkJoin(this.part1(), this.part2()).subscribe(
   next: value => {
       form_fields = value.flat(1)
   }
   complete: () => {
       // You can sort here as well to keep correct ordering
       form_fields.sort((a, b) => a.order - b.order);
       this.options = form_fields;
    }
)

然后将`[options] =“ options”传递给您的组件，并将组件包装在* ngIf =“ questions”中，它将一直保持到准备就绪为止。

这可能不是理想的解决方案，但它是我过去如何解决的方法。 希望能帮助到你。

Answer 2

这是绑定数据从数据库到下拉列表的方式。

如果您在ngOnInit调用所需的数据，那么您要让捕获的数据在UI代码之前。

ngOnInit(): void {
    this.getJobDepartments();
  }

当您在ngAfterViewInit调用UI代码时，可以确保首先获取数据，然后获取UI。

  ngAfterViewInit(): void {
    this.inputs = this.getInputs();
  }

您可以在下拉菜单中使用数据，如下所示。

new InputDropdown({
  key: 'parentJobDepartmentId',
  label: '...',
  options: this.jobDepartments,
  value: '...',
  required: false,
  order: 2
})