Drop down menu 使用6+角形阵列复制动态选择框

选择框1是路径。 选择框2是技能设置

我正在尝试复制一组基于按钮单击的select boxesPath和SkillSet。因此，当我单击Add按钮时，SelectBoxPath和SkillSet表单元素将被复制。这里需要注意的是，select box Skillset元素的选项是动态的，因为它取决于select box路径

问题如下： 步骤1：选择路径作为后端，将根据路径填充技能。在第二个选择框中，选择Java8

第二步：点击添加按钮，复制选择框路径和技能。现在选择“选择框路径作为前端”

步骤3：在第二行中选择路径作为前端后，第一行中选择的技能将重置为空。在图像中，我添加了两个路径

针对该问题的StackBlitz演示：

期望是：我必须选择每一条道路和各自的技能。比如，如果我选择3条不同的路径，那么我必须在3行不同的选择框中选择3种不同的技能

我试过很多解决办法。一切都没有结果。有人能帮忙吗

---

对不起，我的英语和糟糕的格式。感谢你的帮助

您可以将所选路径的技能集推送到数组中，并使用索引在HTML文件中访问它们

在.ts文件中

}

**在HTML文件中**

<form [formGroup]="skillForm">

  <div formArrayName="skillFormArray">
      <div *ngFor="let skillArray of skillFormGroup.controls; let i=index">
          <div [formGroupName]="i">
              <div >
                  <mat-form-field appearance="outline">
                      <mat-select formControlName="majorPath"
                          (selectionChange)="prepareSkillSet($event, i)">
                          <mat-option *ngFor="let major of majorPathObj" value={{major}}>
                              {{major}}
                          </mat-option>
                      </mat-select>
                  </mat-form-field>
                  <mat-form-field appearance="outline">
                    <mat-select formControlName="skillSet">
                        <mat-option *ngFor="let skill of skillsForSelectedPath[i]" [value]="skill">   <!-- display the skills for the selected majorPath using the index of the newly created variable -->
                            {{skill}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                  <button *ngIf="i===0" mat-fab color="accent" class="add-file-button mt-5"
                      (click)="addNewSkill()" aria-label="Add Skill">
                      <mat-icon>add</mat-icon>
                  </button>
                  <button *ngIf="i!==0" mat-fab color="warn" class="add-file-button"
                      (click)="removeSkill(i)" aria-label="Remove Skill">
                      <mat-icon>remove</mat-icon>
                  </button>
              </div>

          </div>

      </div>
  </div>
</form>

因此，每当主路径被激活时，技能对象也会被更新，您可以为新选择的主路径选择相应的技能

输出如下所示

---

由于我不太熟悉向stackblitz添加新项目，我在答案部分添加了整个.ts和html代码，并做了一些修改。看一看。希望这能满足您的期望。谢谢您的修复。它很有魅力。这是包含修复程序的stackblitz URL。请将答案标记为已接受，以便其他人在搜索时发现它有用：

<form [formGroup]="skillForm">

  <div formArrayName="skillFormArray">
      <div *ngFor="let skillArray of skillFormGroup.controls; let i=index">
          <div [formGroupName]="i">
              <div >
                  <mat-form-field appearance="outline">
                      <mat-select formControlName="majorPath"
                          (selectionChange)="prepareSkillSet($event, i)">
                          <mat-option *ngFor="let major of majorPathObj" value={{major}}>
                              {{major}}
                          </mat-option>
                      </mat-select>
                  </mat-form-field>
                  <mat-form-field appearance="outline">
                    <mat-select formControlName="skillSet">
                        <mat-option *ngFor="let skill of skillsForSelectedPath[i]" [value]="skill">   <!-- display the skills for the selected majorPath using the index of the newly created variable -->
                            {{skill}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                  <button *ngIf="i===0" mat-fab color="accent" class="add-file-button mt-5"
                      (click)="addNewSkill()" aria-label="Add Skill">
                      <mat-icon>add</mat-icon>
                  </button>
                  <button *ngIf="i!==0" mat-fab color="warn" class="add-file-button"
                      (click)="removeSkill(i)" aria-label="Remove Skill">
                      <mat-icon>remove</mat-icon>
                  </button>
              </div>

          </div>

      </div>
  </div>
</form>