如何在Angular 7的一个列表中获得多个动态下拉选项值

Question

我正在angualar 8中创建一个动态多个下拉列表。我正在从后端接收列表列表，并且正在遍历列表列表以生成多个动态下拉列表。现在，我需要将所有下拉列表中的选定选项值再次发送到Angular 8中的后端。我无法发送所有值。

我正在以这种格式获取列表，并从中循环生成动态下拉列表

cat_dropdown = [['A'，'B'，'C']，['1'，'2'，'3']]

基于上面的列表，我的html代码生成两个下拉菜单，一个带有选项A，B，C，另一个带有1,2,3。

我的HTML代码：

<form (ngSubmit)="segmentSelection()" #ff="ngForm">
   <div id="userSelection" ngModelGroup="userData" #userData="ngModelGroup">
   <div *ngFor="let first of cat_dropdown">
            <mat-form-field>
                <mat-label>Choose Segment Key</mat-label>
                <mat-select id="selectme" name="segmentKey">
                  <mat-option *ngFor="let segment of first" [value]="segment">
                    {{segment}}
                  </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
</form>

我的component.ts代码：

import { NgForm } from '@angular/forms';

export class myComponent implements OnInit {
 @ViewChild("ff", { static: true }) segmentData: NgForm;

 plotselection = {
    segmentKey: []

  }

segmentSelection(){

  this.plotselection.segmentKey = this.segmentData.value.userData.segmentKey;

  fetch("http://localhost:5000/data-decomposition", {
     method: "POST",
     headers: {
       "Content-Type": "application/json"
    },body: JSON.stringify({
       segmentKey: this.segmentData.value.userData.segmentKey,

     })
   }).then(res => res.json()).then(myjson => {
             console.log(myjson)
     })
}

现在在我的.ts组件中，我有一个字典名“ plotselection”，其中我将键名'segmentKey'定义为空列表。

由于我在前端有2个下拉列表，所以我想我将从前端接收两个值，然后将它们作为列表发送给后端。当我从两个下拉列表中选择选项时，例如从第一个下拉列表中选择“ B”，然后从第二个“ 3”中选择并提交我的选择，那么当我控制台记录响应时，我只能在列表中看到值“ 3”而不是“ B”和“ 3”在一起。如何将两个值都包含在列表中。

谢谢，正在寻找您的建议...

Answer 1

为了方便起见，我使用了Select控件而不是mat-select控件。在表单中，我通过在循环时附加索引来控制来给出特定的名称。

Html

<div *ngFor="let first of cat_dropdown; let num = index">
             <div> 
                <Label>Choose Segment Key</Label>
                <Select   id="selectme{{num}}" [value]="segment" name="segmentKey{{num}}" (change)="ChangeCall($event.target)">
                  <option *ngFor="let segment of first"  >
                    {{segment}}
                  </option>
                </Select>
            </div>
        </div>

以便有两个具有各自选定值的控件。

还有另一种解决方案，用于更改选择控件上的事件。