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

Question

我有 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>

如何只获取那些被点击的复选框。请帮帮我，因为我要将选定的值传递给 angular highchart 图表。

Answer 1

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

[(ngModel)]="submenu.selected"

您所要做的就是 crawl/iterate 到 filterType.submenus 并筛选出 selected===true

Answer 2

您可以使用您的子菜单

创建一些临时文件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() 函数始终 returns 您选择的复选框值

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

Get selected checkbox value in *ngFor angular 2

ngfor

angular