Angular 2: 获取多个被选中复选框的值

16 浏览
0 Comments

Angular 2: 获取多个被选中复选框的值

我的问题很简单：我有一个复选框列表，如下所示：

我想要发送一个包含所选选项的数组，比如：

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

谢谢你的帮助！

0

3 答案

0 Comments

Angular 2中获取多个选中复选框的值的问题出现的原因是开发者在实现复选框列表时遇到了困难。解决方法是使用Angular框架提供的表单控件和事件绑定功能来实现对复选框的选中状态进行监测和处理。

首先，开发者创建了一个包含多个选项的列表，其中每个选项都有一个唯一的id和对应的值。然后，在HTML中使用*ngFor指令来遍历列表，并将每个选项渲染成一个复选框。在复选框的输入事件中，通过调用onCheckboxChange方法来处理复选框的选中状态变化。

在onCheckboxChange方法中，开发者通过判断复选框的选中状态来决定是否将该选项的id添加到一个名为checkedList的数组中。如果复选框被选中（checked为true），则将选项的id添加到checkedList数组中；如果复选框被取消选中（checked为false），则遍历checkedList数组，找到对应的选项id并从数组中删除。

最后，开发者通过打印checkedList数组来查看已选中的复选框的值。

这个解决方案对于开发者在Angular 2中获取多个选中复选框的值问题起到了很好的作用，使得开发者能够方便地处理复选框的选中状态，并获取选中复选框的值。

0
0 Comments

问题的出现的原因：

该问题的出现是因为需要获取多个选中复选框的值，但是在Angular 2中，无法直接通过ngModel来获取多个复选框的值。

解决方法：

以下是解决该问题的代码示例：

这里有三个对象被使用：

options = ['OptionA', 'OptionB', 'OptionC'];
optionsMap = {
    OptionA: false,
    OptionB: false,
    OptionC: false,
};
optionsChecked = [];

还有三个有用的方法：

1. 用于初始化optionsMap：

initOptionsMap() {
    for (var x = 0; x



2. 用于更新optionsMap：




updateCheckedOptions(option, event) {
    this.optionsMap[option] = event.target.checked;
}





3. 用于将optionsMap转换为optionsChecked并在发送POST请求前存储在options中：




updateOptions() {
    for(var x in this.optionsMap) {
        if(this.optionsMap[x]) {
            this.optionsChecked.push(x);
        }
    }
    this.options = this.optionsChecked;
    this.optionsChecked = [];
}





希望这个回答对你有帮助。如果你不了解数组的长度或者不了解所有条目，代码仍然可以正常运行。你可以尝试给出的Plnkr链接。


对于这个问题，我相信我的回答在这里：stackoverflow.com/a/41027266/4496240，更适合，因为它需要更少的工作，以更"Angular"的方式完成。它也已经更新以适应新的表单库。


关于如何编写这个POST请求，你可以参考这个回答。
0
0 Comments

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

问题的出现原因：在Angular 2中，如何获取多个已选中复选框的值。

解决方法：

1. 在HTML模板中使用ngModel指令来实现复选框的双向绑定。

2. 遍历options数组，在每个复选框上使用ngModel指令来绑定其checked属性到对应的option对象的checked属性上。

3. 在组件类中定义一个getter方法selectedOptions，用于返回已选中的复选框的值。

4. 在selectedOptions方法中使用filter和map方法来筛选已选中的option对象，并返回对应的value值。

5. 在组件类中使用get关键字来定义selectedOptions方法。

6. 在模板中直接调用selectedOptions属性即可获取已选中的复选框的值。

以下是完整的代码示例：




    
    

        
    





// my.component.ts
import { Component } from '@angular/core';
@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() {
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value);
  }
}

通过上述代码可以很容易地获取到已选中的复选框的值。在模板中，我们使用ngFor指令来遍历options数组，并使用ngModel指令来实现复选框的双向绑定。在组件类中，我们定义了一个getter方法selectedOptions，通过filter和map方法来筛选已选中的option对象，并返回对应的value值。在模板中，我们直接调用selectedOptions属性即可获取已选中的复选框的值。

需要注意的是，由于在组件类中使用了get关键字来定义selectedOptions方法，我们在模板中调用时不需要加上括号，即使用this.selectedOptions而不是this.selectedOptions()。

另外，有用户提出了关于性能问题的疑问，即getter方法selectedOptions是否在每次点击、按键等用户操作时都会被调用，如果options数组很大可能会导致性能问题。实际上，由于我们只对options数组中的checked属性进行了筛选，而不是对整个数组进行了遍历，所以性能问题并不大。

0