Angular 获取动态选择的选定选项

我在我的应用程序中得到了动态数量的下拉列表。例如，我得到两个下拉列表

因为我有一组动态的选择，所以我需要能够捕获所选的值，我可以在控制台中看到这些值。问题是，如果我们为年度选择

March

和

2017

，我需要在提交表单时能够捕获这两个值。如果我对所有选择都有

（change）=“onChange（$event.target.value）”

，我该怎么做？我不能只将这些值分配给两个局部变量，因为我可能有许多选择，如：

月

，

年

，

公司

，

客户

HTML：

<div class="row  left" *ngFor='let control of tabControls; let i = index' style="padding-bottom:3px">
    <div class="col-lg-2 text-left" style="border:0px dotted">
        {{control.DropDownTitle}}:
    </div>
    <div class="col-lg-3 text-left">
       <select [(ngModel)]="selected[i]" (change)="onChange($event.target.value)" style="width:80%">
          <option value="?" >Please Select</option>
          <option selected *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
            {{controlList.Value}}
          </option>
       </select>
   </div>

更新后，尝试了以下操作： HTML

<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)">
   <div class="row  left" *ngFor='let control of tabControls; let i = index' style="padding-bottom:3px">
      <div class="col-lg-2 text-left" style="border:0px dotted">
         {{control.DropDownTitle}}:
      </div>
      <div class="col-lg-pull-3 text-left">
         <select  style="width:80%" name="hhh">
            <option value="?">Please Select</option>
            <option selected *ngFor='let controlList of control.DropdownValues'>
                {{controlList.Value}}
            </option>
         </select>
         <button type="submit">Submit Values</button>
      </div>
</form>
<pre>{{myForm.value | json}}</pre>

输出

控制台

Intefaces:

selected: any[] = [];
onChange(selected: any) {
  console.log('selected item ' + selected);
}

[


  {
    "DropdownValues": [
      {
        "DropDownID": 1,
        "DropDownMappingID": 1,
        "Value": "January"
      },
      {
        "DropDownID": 1,
        "DropDownMappingID": 3,
        "Value": "February"
      },
      {
        "DropDownID": 1,
        "DropDownMappingID": 4,
        "Value": "March"
      }


    ],
    "DropDownID": 1,
    "DropDownTitle": "Month",
    "IsMonth": true,
    "IsYear": false,
    "IsCompay": false,
    "IsReportName": false
  },
  {
    "DropdownValues": [
      {
        "DropDownID": 2,
        "DropDownMappingID": 14,
        "Value": "2016"
      },
      {
        "DropDownID": 2,
        "DropDownMappingID": 15,
        "Value": "2017"
      },
      {
        "DropDownID": 2,
        "DropDownMappingID": 16,
        "Value": "2018"
      },
      {
        "DropDownID": 2,
        "DropDownMappingID": 17,
        "Value": "2019"
      },
      {
        "DropDownID": 2,
        "DropDownMappingID": 18,
        "Value": "2020"
      }
    ],
    "DropDownID": 2,
    "DropDownTitle": "Year",
    "IsMonth": false,
    "IsYear": true,
    "IsCompay": false,
    "IsReportName": false
  }
]

---

我建议你把它包装成一种形式（如果在你的用例中可能的话），在我看来，这是迄今为止最好的解决方案，因为你有动态值，而且事先不知道它们。表单可以很好地使用它，您可以轻松地用您的值组成一个对象！同时，如果你不需要的话，你可以“摆脱”所有的NGM模型，这会使它更干净

因此，请这样做：

{
  "Month": "February",
  "Year": "2017"
}

console.log(Object.values(theObject));

你可以一起工作。当然，如果您进行更改，这会不断动态变化。如果您不希望有一个提交按钮，您可以用任何方式解决它，但要知道您在

myForm.value

-object:）中有所有值

示例

希望这有帮助！：）

编辑：

使用

Object.values

，可以最容易地访问对象值，这将创建一个漂亮的数组：

["February", "2017"]

这将产生如下结果：

for (let p in theObject) {
   console.log("property: ", p, " , value: ", theObject[p]);
}

对象值可能不在任何地方都受支持，因此最安全的选择可能是使用以下选项：

property: Month, value: February
property: Year, value: 2017

这会给你一些类似的东西：

---

请提供plunker。您不能从

选定的

数组中获取所有选定的值吗？是的，我可以，但每次更改选择时，选定的数组都会重置。我可以通过创建另一个数组并在数组中推送值来实现。问题是它会让反弹变得混乱，例如，如果我选择三月作为月份，然后将其更改为四月，我将在array@rgoal嘿，你进化了！这个问题是好的，问题清楚地陈述了等等。这是一种恭维，而不是讽刺性的评论：）+1表示感谢；）是的，这条评论毫无用处，所以我稍后会删除它：D@AJT_82从你那里学到：）谢谢你，它没有工作，更新了我的上述代码。我认为这是由于使用了一个接口，这就是为什么对象没有在屏幕上打印或控制台界面与此无关。这似乎是如何构建数据的问题。在我的plunker中，我只是“假设”了你的

tabControls

数组的样子，很明显它与你的不同，这导致了

object

错误。正如您所看到的，界面并不重要：您可以发布您的传入数据吗。根据您的接口，当查看JSON的构建时，我的解决方案应该按原样工作，即您的接口。嗯。但是请粘贴传入的JSON，或者最好创建一个plunker:）。。。还有一个提示。请，如果您尝试一些解决方案，例如通过提供的答案。将该更新作为更新添加到您的问题中，因为为了将来参考，当有人偶然发现您的问题时，应在问题中明确说明原始问题。否则，例如，在这种情况下，有人会想知道为什么我给出了您在原始问题中已经说明的答案；）这一次我为你编辑了你的问题：）@AJT-82有意义谢谢你这么做，添加了我的jason Ubove将你的JSON复制到plunker，工作非常出色，如你所见！我现在想不出更多的建议了……：（请您尝试在plunker中重新创建问题？您使用的是哪个角度版本？

["February", "2017"]

for (let p in theObject) {
   console.log("property: ", p, " , value: ", theObject[p]);
}

property: Month, value: February
property: Year, value: 2017