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

小编典典

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

json

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

<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的一部分。

谢谢你的帮助！

阅读 258

2020-07-27

共1个答案

小编典典

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

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

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

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

共有3种有用的方法：

1 。启动optionsMap：

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

2. 更新optionsMap：

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

3. 转换optionsMap成optionsChecked并将其存储在options发送POST请求之前：

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

2020-07-27