在 *ngFor angular 2 中获取选中的复选框值答案

【问题标题】：Get selected checkbox value in *ngFor angular 2在 *ngFor angular 2 中获取选中的复选框值
【发布时间】：2017-06-28 04:05:43
【问题描述】：

我的json如下：

[
  {
    "name": "Parent",
    "submenus": [
        {
            "name":"Child1"
        },
        {
            "name":" Child2"
        },
        {
            "name":" Child3"
        },
        {
            "name":"Child4"
        },
        {
            "name":"Child5"
        }
    ]
  }
]

和html文件中的代码

 <li *ngFor='let submenu of filterType.submenus'>
         <div class="checkbox">
        <input id="checkbox1" class="styled" type="checkbox" [(ngModel)]="submenu.selected">
        <label for="checkbox1">
                         {{submenu.name}}
                    </label>
    </div>

      </li>

如何只获取那些被点击的复选框。请帮助我，因为我将选定的值传递给角度高图。

【问题讨论】：

试图明确 - 当您希望选中复选框时。我注意到您正在使用 submenu.selected 但从您的 json 响应中您没有选择子菜单对象上的属性。我希望您得到它。

标签： angular ngfor

【解决方案1】：

您可以使用子菜单创建一些临时 json

   filternames = [
            {
              name: 'Child1',
              checked: false
            },
            {
              name: 'Child2',
              checked: false
            },
            {
              name: 'Child3',
              checked: false
            },
          ];

           checked() {
          return this.filternames .filter(item => { return item.checked; });
        }

HTML

  <li *ngFor='let submenu of filternames'>
         <div class="checkbox">
        <input id="checkbox1" class="styled" type="checkbox" 
[(ngModel)]="submenu.checked" [value]="submenu.name">
        <label for="checkbox1">
                         {{submenu.name}}
                    </label>
    </div>

      </li>


      <pre>Selected names: <span *ngFor="let filternames of checked()" ">{{ filternames.name}}</span></pre

checked() 函数总是返回您选择的复选框值

【讨论】：

感谢您的回答，但我找到了一个更好的解决方案，将 submenu.name 传递给事件，然后将其推送到数组..Link..plnkr.co/edit/mWtlkydF0FzioS3c2esQ?p=preview
如果您的图表应该根据复选框选择进行更改，那么您的解决方案非常好。

【解决方案2】：

因为您已将复选框绑定到您的模型：

[(ngModel)]="submenu.selected"

您所要做的就是爬取/迭代filterType.submenus 并过滤带有selected===true 的人

【讨论】：

感谢您的回答，您能否分享一段代码，例如将选定的检查值存储在数组中。再次提前感谢