Angular基于api调用动态生成反应形式

Question

我想基于api调用以角度形式动态生成选择和输入元素。

<div formArrayName="{{formControlValues.dropdownOption}}">
      <div *ngFor="let option of getDropdownOptions(addConcrete); let i=index">
        <div [formGroupName]="i">
          <mat-form-field *ngFor="let drop of concrete.options.dropdownOptions">
            <mat-select placeholder="{{drop.display}}" formControlName="{{formControlValues.selection}}" id="{{formControlValues.selection}}" required>
              <mat-option *ngFor="let select of drop.selections" [value]="select">
                {{select}}
              </mat-option>
            </mat-select>
            <mat-error *ngIf="addConcrete.get(formControlValues.selection).hasError('required')">This is required</mat-error>
          </mat-form-field>
        </div>
      </div>
    </div>

concrete.options.dropdownOptions来自http GET调用。所以表单无法构建，因为它在获取响应主体之前尝试构建。我的相应打字稿看起来像

createForm() {
    let controlsConfig = {};
    controlsConfig[this.formControlValues.dropdownOption] = this.fb.array(this.getAllDropOptions());
    this.addConcrete = this.fb.group(controlsConfig);
  }

  getAllDropOptions() {
    let array: Array<FormGroup> = new Array<FormGroup>();
    for(let dropOption of this.concrete.options.dropdownOptions) {
      array.push(this.getDropdownOption(dropOption.display));
    }
    return array;
  }

  getDropdownOption(display: string): FormGroup {
    return this.fb.group({
      display: [display],
      selection: ['']
    });
  }

虽然这不起作用，但我正在寻找一种基于http返回数据生成表单的一般解决方案。