我有两个数据数组:AssociatedPrincipals(以前保存的数据)和 ReferencePrincipals(要填充到下拉控件中的静态数据)。我正在努力从 AssociatedPrincipals 获取以前的值，以便在页面加载时以动态数量(大多数示例使用单个下拉列表)的下拉列表显示/选择。

我不确定如何设置表单(代码隐藏和 HTML)，尤其是设置 Select 的 formControlName。目前，每个下拉列表中的静态值都会填充，但我无法让选择的值正确绑定(bind)。

public ngOnInit() {
    this.factsForm = this.formbuilder.group({
        associatedPrincipals: this.formbuilder.array([]),
        referencePrincipals: this.formbuilder.array([])
    });

    // Data for both of these methods comes from external source...
    var responseData = // HTTP source...
    // Push retrieved data into form
    this.initPrincipals(responseData[0]);
    // Push static data into form
   this.initStaticData(responseData[1]);
}

public initPrincipals(principals?: IAssociatedPrincipal[]): FormArray {
    principals.forEach((principal) => {
 this.associatedPrincipals.push(this.createPrincipalFormGroup(principal));
    });
}

public initStaticData(response: IReferencePrincipal[]) {
   response.forEach((principal) => {
      this.referencePrincipals.push(
           this.formbuilder.control({
                code: principal.code,
                canHaveLead: principal.canHaveLead,
                isDuplicate: false
              }));
        });
}

public createPrincipalFormGroup(principal: IAssociatedPrincipal) {
        return this.formbuilder.group({
            code: principal.code,
            canHaveLead: false,
            isDuplicate: false
        });
    }

public get associatedPrincipals(): FormArray {
        return this.factsForm.get('associatedPrincipals') as FormArray;
    }

    public get referencePrincipals(): FormArray {
        return this.factsForm.get("referencePrincipals") as FormArray;
    }

HTML:

 <form novalidate [formGroup]="factsForm">
        <div formArrayName="associatedPrincipals">
             <div *ngFor="let associatedPrincipal of associatedPrincipals.controls; let i=index;" [formGroupName]="i" >
                <select class="form-control create-input"
                        formControlName="i">
                     <option value=null disabled selected hidden>--Select--</option>
                       <option *ngFor="let refPrincipal of referencePrincipals.controls" [ngValue]="refPrincipal">refPrincipal.value.code</option>
                 </select>
             </div>
         </div>
    </form>

感谢任何反馈!

编辑:添加显示问题的 Plunker: https://embed.plnkr.co/XMLvFUbuc32EStLylDGO/

最佳答案

你的演示中的问题

根据您提供的demo，存在以下几个问题:

• 没有分配给 select 的 formControlName。
• 您正在将对象 绑定(bind)到选择的选项。

针对第一个问题

由于您正在遍历 associatedPrincipals 以动态显示下拉列表。 associatedPrincipals 是一个formArray，可以考虑如下:

associatedPrincipals = {
  "0": FormControl,
  "1": FormControl
}

所以你可以简单地将*ngFor表达式中定义的i分配给formControlName。

<select formControlName="{{i}}" style="margin-top: 10px">
   ...
</select>

针对第二个问题

当绑定(bind)object到option时，Angular会比较object instance的默认值和option的值默认情况下。

您可以将相同的实例(从 referencePrincipals 的 formControls 的值获取)设置为 associatedPrincipals 的 formControl(如@Fetra R. 的回答)。但这不是最方便的方法，因为您必须采用一些逻辑来保持对象的相同实例。

这里我会给你另一种解决方案，它使用专门针对你当前情况设计的compareWith 指令，参见 docs .

使用 compareWith 指令，你只需要实现一个 compareFun 来告诉 Angular 如何将两个对象(具有不同的实例)视为相同的。在这里你可以包括 比较对象实例，同时比较对象字段。

<select formControlName="{{i}}" style="margin-top: 10px" [compareWith]="compareFun">
  <option value=null disabled selected hidden>--Select--</option>
  <option *ngFor="let refPrincipal of referencePrincipals.controls"
     [ngValue]="refPrincipal.value">{{ refPrincipal.value.code }}</option>
</select>

// tell angular how to compare two objects
compareFn(item1, item2): boolean {
  return item1 && item2 ? item1.code === item2.code : item1 === item2;
}

引用 docs 并修复了 demo 以了解有关它的详细信息。

关于javascript - Angular react 形式 : Dynamic Select dropdown value not binding，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46164708/