Question

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

由于我有一组动态选择，我需要能够捕获所选的值，我可以在控制台中看到。问题是，如果我们选择年份的March和2017，我需要能够在提交表单时捕获这两个值。如果我对所有选择(change)="onChange($event.target.value)"，我怎么能这样做？我无法将这些值分配给两个局部变量，因为我可能会有很多选择：month，year，company，client .... < / p>

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>

TS：

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

更新，尝试了以下内容：

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>

组件

tabControls: ITabControls[];        
submit(val:any) {
  console.log("values: ", val)
}

输出

控制台

Intefaces：

export interface ITabControls {
    DropdownValues: Array<IDropdownValues>
    DropDownID: number;
    DropDownTitle: string;
    IsMonth: boolean;
    IsYear: boolean;
    IsCompay: boolean;
    IsReportName: boolean;
}

export interface IDropdownValues {
    DropDownID: number;
    DropDownMappingID: number;
    Value: string;
}

JASON

[


  {
    "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
  }
]

Answer 1

我建议你实际将它包装在一个表单中（如果你的用例可能）这是我脑海中最好的解决方案，因为你有动态值并且事先不知道它们。表单效果很好，您可以轻松地使用您的值组合对象！同时你可以“摆脱”所有那些ngModels等，这使得它更清洁，如果你当然不需要它们。

所以做这样的事情：

<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)">
<div *ngFor='let control of tabControls; let i = index'> 
   <div>
      {{control.DropDownTitle}}:
   </div>
   <div>
      <select name="{{control.DropDownTitle}}" ngModel>
         <option *ngFor='let controlList of control.DropdownValues'>
            {{controlList.Value}}
         </option>
       </select>
    </div>
</div>
<button type="submit">Submit Values</button>
</form>

这将创建一个漂亮的对象，如下所示：

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

你可以使用。如果您进行更改，这当然会动态变化。如果您不希望有这样的提交按钮，您可以按照自己喜欢的方式解决它，但知道您拥有myForm.value中的所有值 - 对象:)

示例Plunker

希望这有帮助！：）

编辑：

您可以使用Object.values最简单地访问您的Object值，这会创建一个很好的数组：

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

将输出例如：

["February", "2017"]

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

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

会给你类似的东西：

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

获取动态选择的选定选项

更新，尝试了以下内容：

1 个答案: