获取动态选择的选定选项

时间:2017-02-09 18:29:55

标签: angular

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

enter image description here

由于我有一组动态选择,我需要能够捕获所选的值,我可以在控制台中看到。问题是,如果我们选择年份的March2017,我需要能够在提交表单时捕获这两个值。如果我对所有选择(change)="onChange($event.target.value)",我怎么能这样做?我无法将这些值分配给两个局部变量,因为我可能会有很多选择:monthyearcompanyclient .... < / 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)
}

输出

enter image description here

控制台

enter image description here

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

1 个答案:

答案 0 :(得分: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