小编Jos*_*_vi的帖子

我在Angular2中有一个动态表单.它是一个有4个选择的表单组.此表单还有一个按钮,允许您添加另外4个选项,如下所示:

<form [formGroup]="relationsForm">

<div formArrayName="selectedItems" *ngFor="let item of relationsForm.get('selectedItems').controls; let i=index">
    <div [formGroupName]="i">
        <div>
            <md-select placeholder="Source" formControlName="origin_source"   (change)="onChangeOrigin($event, i)">
                 <md-option *ngFor="let origin of selectedOrigins"  [value]="origin.name" >{{ origin.name }}</md-option> 
            </md-select>
            <md-select  placeholder="Field" formControlName="field_source">

            </md-select>
            <md-select  placeholder="Source1" formControlName="origin_dest" (change)="onChangeDest($event)" >
                 <md-option  *ngFor="let dest of selectedOrigins"  [value]="dest.name" >{{ dest.name }}</md-option> 
            </md-select>
            <md-select  placeholder="Field1" formControlName="field_dest">

            </md-select>
        </div>
    </div>

</div>

<button (click)='addRelation()'>ADD RELATIONS</button>

这应该如何工作？当您在第一个选择中选择任何值时,第二个选择必须显示一组具体的项目.

第三个选择具有与第一个选择相同的值,并且具有与第四个选择相关的相同行为.

这组数据是这样的:

this.origins = [{
  id: 1,
  name: 'origin1',
  desc: 'desc1',
  columnData: [{ id: 1, name: 'column1' },
  { id: 2, …