如何在 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>

這樣就有兩個具有各自選定值的控件。

還有一種替代解決方案是使用 Select Control 上的 Change 事件。