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>

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

Answer 1

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

[(ngModel)]="submenu.selected"

您所要做的就是抓取/遍历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

＆GT;

checked（）函数始终返回所选的复选框值

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

2 个答案: