复选框在角度 4 中不起作用答案

【问题标题】：Checkbox not working in angular 4复选框在角度 4 中不起作用
【发布时间】：2018-06-05 10:06:48
【问题描述】：

我可以使用角度添加下拉列表

@Component({
  selector: 'app-child-component',
  template: `
    <select id="select" formControlName = "day"  >                                                
    <option *ngFor = "let g of dayList" [value] = "g"> {{g}} 
    </option>
    </select>                                                                                             
  `,
})

https://plnkr.co/edit/M88wFl?p=preview

但我无法添加多个复选框

代码如下：

@Component({
  selector: 'app-child-component',
  template: `
    Select days in a week :
    <td class="even" *ngFor="let item of dayList;let i = index">                                                       
    <input [(ngModel)]="item.check"  type="checkbox" checked="item.check" formControlName = "selectedDays" (change)="updateChkbxArray(n.id, $event.checked, 'selectedDays')" value="n.id" >  {{item}}                                                                                                       
  `,
})

https://plnkr.co/edit/gyAj6W?p=preview

你能帮我展示一下复选框集合吗，

【问题讨论】：

标签： jquery angular angular4-forms

【解决方案1】：

不用绑定ngModel和formControlName，看这里

<input class="input" type="search" #agmSearch>
<p class="even" *ngFor="let item of dayList;let i = index">
<input  type="checkbox" checked="item.check" (change)="updateChkbxArray(item, $event.checked, 'selectedDays')" value="n.id" >  {{item}}
</p>

Working Example

【讨论】：

它可以工作，但是我如何在发布表单时获得逗号分隔的 json 对象？
你可以在(chnage)方法中自定义你的对象
cupdatechkbxarray 将创建选定值的数组集合，但没有 formControlName = "selectedDays" 我如何获得选定的下拉值？我希望它像 selectedDays: {'Mon',"Wed"}

【解决方案2】：

既然你已经使用了 input 元素，你能否在你的应用的根模块中包含来自“@angular/forms”的“FormsModule”并尝试一下。

【讨论】：

【解决方案3】：

试试下面的代码来显示多选框以及如何在组件中获得多选

//HTML

<tr *ngFor="let address of addressList">
    <td>
        <input type="checkbox" value="{{address.id}}" name="{{address.email}}" (change) ="updateSelectedTimeslots($event)" />
    </td>
</tr>

//组件

countries: any[] = [];
updateSelectedTimeslots(event) {
    let this.countries: any[] = [];
    if (event.target.checked) {
        if (this.countries.indexOf((event.target.name)) < 0) { 
                this.countries.push(({'email':event.target.name}));
        }
    } else {
         for(let i = 0; i < this.countries.length; i++) {
            let country = this.countries[i];
            if(country.email.toLowerCase().indexOf(event.target.name.toLowerCase()) == 0) {
                this.countries.splice(this.countries.indexOf(({'email':event.target.name})), 1);              
            } 
        }
    }
}

【讨论】：