Question

我的问题很简单：我有一个像这样的复选框列表：

<div class="form-group">
    <label for="options">Options :</label>
    <label *ngFor="#option of options" class="form-control">
        <input type="checkbox" name="options" value="option" /> {{option}}
    </label>
</div>

我想发送一系列选定的选项，例如： [option1, option5, option8]如果选择了选项1,5和8。这个数组是我想通过HTTP PUT请求发送的JSON的一部分。

感谢您的帮助！

Answer 1

这是使用ngModel（最终的Angular 2）

的简单方法

<!-- my.component.html -->

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options">
        <label>
            <input type="checkbox"
                   name="options"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}

Answer 2

感谢Gunter，我找到了解决方案！这是我的整个代码，如果它可以帮助任何人：

"Hello World".split(" ").pop().charAt(0); // W

以下是我正在使用的3个对象：

<div class="form-group">
            <label for="options">Options :</label>
            <div *ngFor="#option of options; #i = index">
                <label>
                    <input type="checkbox"
                           name="options"
                           value="{{option}}"
                           [checked]="options.indexOf(option) >= 0"
                           (change)="updateCheckedOptions(option, $event)"/>
                    {{option}}
                </label>
            </div>
        </div>

有三种有用的方法：

<强> 1 即可。要发起options = ['OptionA', 'OptionB', 'OptionC']; optionsMap = { OptionA: false, OptionB: false, OptionC: false, }; optionsChecked = [];：

optionsMap

2。更新initOptionsMap() { for (var x = 0; x<this.order.options.length; x++) { this.optionsMap[this.options[x]] = true; } }：

optionsMap

3。将updateCheckedOptions(option, event) { this.optionsMap[option] = event.target.checked; }转换为optionsMap并在发送POST请求之前将其存储在optionsChecked中：

options

Answer 3

创建一个列表，如： -

this.xyzlist = [
  {
    id: 1,
    value: 'option1'
  },
  {
    id: 2,
    value: 'option2'
  }
];

Html： -

<div class="checkbox" *ngFor="let list of xyzlist">
            <label>
              <input formControlName="interestSectors" type="checkbox" value="{{list.id}}" (change)="onCheckboxChange(list,$event)">{{list.value}}</label>
          </div>

然后在它的组件ts： -

onCheckboxChange(option, event) {
     if(event.target.checked) {
       this.checkedList.push(option.id);
     } else {
     for(var i=0 ; i < this.xyzlist.length; i++) {
       if(this.checkedList[i] == option.id) {
         this.checkedList.splice(i,1);
      }
    }
  }
  console.log(this.checkedList);
}

Answer 4

<input type="checkbox" name="options" value="option" (change)="updateChecked(option, $event)" /> 

export class MyComponent {
  checked: boolean[] = [];
  updateChecked(option, event) {
    this.checked[option]=event; // or `event.target.value` not sure what this event looks like
  }
}

Answer 5

在使用Typescript的角度2到9的角度

来源Link

我们可以使用一个对象来绑定多个复选框

  checkboxesDataList = [
    {
      id: 'C001',
      label: 'Photography',
      isChecked: true
    },
    {
      id: 'C002',
      label: 'Writing',
      isChecked: true
    },
    {
      id: 'C003',
      label: 'Painting',
      isChecked: true
    },
    {
      id: 'C004',
      label: 'Knitting',
      isChecked: false
    },
    {
      id: 'C004',
      label: 'Dancing',
      isChecked: false
    },
    {
      id: 'C005',
      label: 'Gardening',
      isChecked: true
    },
    {
      id: 'C006',
      label: 'Drawing',
      isChecked: true
    },
    {
      id: 'C007',
      label: 'Gyming',
      isChecked: false
    },
    {
      id: 'C008',
      label: 'Cooking',
      isChecked: true
    },
    {
      id: 'C009',
      label: 'Scrapbooking',
      isChecked: false
    },
    {
      id: 'C010',
      label: 'Origami',
      isChecked: false
    }
  ]

在HTML模板中使用

  <ul class="checkbox-items">
    <li *ngFor="let item of checkboxesDataList">
      <input type="checkbox" [(ngModel)]="item.isChecked" (change)="changeSelection()">{{item.label}}
    </li>
  </ul>

要获取选中的复选框，请在类中添加以下方法

  // Selected item
  fetchSelectedItems() {
    this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {
      return value.isChecked
    });
  }

  // IDs of selected item
  fetchCheckedIDs() {
    this.checkedIDs = []
    this.checkboxesDataList.forEach((value, index) => {
      if (value.isChecked) {
        this.checkedIDs.push(value.id);
      }
    });
  }

Answer 6

我希望这可以帮助那些遇到同样问题的人。

templet.html

<form [formGroup] = "myForm" (ngSubmit) = "confirmFlights(myForm.value)">
  <ng-template ngFor [ngForOf]="flightList" let-flight let-i="index" >
     <input type="checkbox" [value]="flight.id" formControlName="flightid"
         (change)="flightids[i]=[$event.target.checked,$event.target.getAttribute('value')]" >
  </ng-template>
</form>

component.ts

flightids数组将有另一个这样的数组 [[true，'id_1']，[false，'id_2']，[true，'id_3'] ...] 这里true表示用户选中了它，false表示用户选中了然后取消选中它。用户从未检查过的项目不会插入到数组中。

flightids = []; 
confirmFlights(value){  
    //console.log(this.flightids);

    let confirmList = [];
    this.flightids.forEach(id => {
      if(id[0]) // here, true means that user checked the item 
        confirmList.push(this.flightList.find(x => x.id === id[1]));
    });
    //console.log(confirmList);

}

Answer 7

我刚刚为那些正在使用列表的人简化了一点 value对象。的 XYZ.Comonent.html

<div class="form-group"> <label for="options">Options :</label> <div *ngFor="let option of xyzlist"> <label> <input type="checkbox" name="options" value="{{option.Id}}" (change)="onClicked(option, $event)"/> {{option.Id}}-- {{option.checked}} </label> </div> <button type="submit">Submit</button> </div>

** XYZ.Component.ts **。

创建一个列表 - xyzlist。

分配值，我在此列表中传递来自Java的值。

值为Int-Id，boolean -checked（可以在Component.ts中传递）。

现在在Componenet.ts中获取价值。

xyzlist;//Just created a list onClicked(option, event) { console.log("event " + this.xyzlist.length); console.log("event checked" + event.target.checked); console.log("event checked" + event.target.value); for (var i = 0; i < this.xyzlist.length; i++) { console.log("test --- " + this.xyzlist[i].Id; if (this.xyzlist[i].Id == event.target.value) { this.xyzlist[i].checked = event.target.checked; } console.log("after update of checkbox" + this.xyzlist[i].checked); }

Answer 8

我刚刚面对这个问题，并决定尽可能减少变量，以保持工作区清洁。这是我的代码示例

<input type="checkbox" (change)="changeModel($event, modelArr, option.value)" [checked]="modelArr.includes(option.value)" />

调用更改的方法是在模型中推送值，或者将其删除。

public changeModel(ev, list, val) {
  if (ev.target.checked) {
    list.push(val);
  } else {
    let i = list.indexOf(val);
    list.splice(i, 1);
  }
}

Answer 9

我遇到了同样的问题，现在我得到了一个我更喜欢的答案（也许你也是）。我已将每个复选框限制为数组索引。

首先我定义了一个像这样的对象：

SelectionStatusOfMutants: any = {};

然后复选框是这样的：

<input *ngFor="let Mutant of Mutants" type="checkbox"
[(ngModel)]="SelectionStatusOfMutants[Mutant.Id]" [value]="Mutant.Id" />

如您所知，JS中的对象是具有任意索引的数组。所以结果如此简单：

计算这样的选定内容：

let count = 0;
    Object.keys(SelectionStatusOfMutants).forEach((item, index) => {
        if (SelectionStatusOfMutants[item])
            count++;
    });

类似于获取这样的选择：

let selecteds = Object.keys(SelectionStatusOfMutants).filter((item, index) => {
        return SelectionStatusOfMutants[item];
    });

你知道吗？！很简单很漂亮。 TG

Answer 10

@ccwasden上面的解决方案对我来说是很小的改动，每个复选框必须具有唯一的名称，否则绑定将不起作用

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options; let i = index">
        <label>
            <input type="checkbox"
                   name="options_{{i}}"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}

并且还需要在您的主模块中导入FormsModule

import { FormsModule } from '@angular/forms';


imports: [
    FormsModule
  ],

Answer 11

由于我花了很长的时间解决类似的问题，因此我想分享我的经验。我的问题是一样的，要知道，触发指定事件后会得到很多复选框值。我尝试了很多解决方案，但对我而言，最性感的方法是使用 ViewChildren 。

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components: QueryList<any>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components.toArray());
}

在这里找到：https://stackoverflow.com/a/40165639/4775727

其他可能的ref解决方案，有很多类似的主题，没有一个是针对该解决方案的......

Answer 12

这是没有地图，“已检查”属性和FormControl的解决方案。

app.component.ts：

<div *ngFor="let item of options">
  <input type="checkbox" 
  (change)="onChange($event.target.checked, item)"
  [checked]="checked(item)"
>
  {{item}}
</div>

app.component.html：

  options = ["1", "2", "3", "4", "5"]
  selected = ["1", "2", "5"]

  // check if the item are selected
  checked(item){
    if(this.selected.indexOf(item) != -1){
      return true;
    }
  }

  // when checkbox change, add/remove the item from the array
  onChange(checked, item){
    if(checked){
    this.selected.push(item);
    } else {
      this.selected.splice(this.selected.indexOf(item), 1)
    }
  }

DEMO

Angular 2：获取多个已选中复选框的值

12 个答案: