创建动态复选框angular2打字稿答案

【问题标题】：Create Dynamic checkbox angular2 typescript创建动态复选框angular2打字稿
【发布时间】：2017-01-09 17:15:32
【问题描述】：

在我的表单中，我有四个默认复选框，并有一个文本框和添加按钮。如果我在文本框中键入文本并单击添加按钮，我需要动态创建一个复选框。以下代码可以正常工作，但默认情况下会选中动态复选框。如何设置默认值是选中还是未选中？

    <div class="checkbox abc-checkbox abc-checkbox-primary" *ngFor='let i of arrayofLevels' >
                                                                    <input id={{i.event_name}}  type="checkbox" value = {{i.event_name}}  (change)="checkAndCheck(i)" formControlName="event_name" ng-checked=false/>
                                                                    <label for={{i.event_name}}> {{i.event_name}}  </label> 
</div>

单击“添加”按钮时，我只是将新值推送到 arrayofLevels 数组。

arrayofLevels:eventDetails[] =[{event_id:1, event_name:"Form1"},{event_id:2, event_name:"Form2"}, {event_id:3, event_name:"Form3"}, {event_id:4, event_name:"Form4"}]

let newEvent = {event_id:resDataFilter.event_id, event_name:resDataFilter.event_name}

this.arrayofLevels.push(newEvent);

【问题讨论】：

标签： javascript angular checkbox

【解决方案1】：

尝试使用 HTML checked 属性本身的单向绑定来设置 checked 状态。您可以将每个复选框的checked 属性绑定到一个集合（例如，使用该集合在外部将每个复选框的checkedArray = [false,false,false,false]) that maintains thecheckedstates. You can then manage and update thechecked 状态绑定。

您的模板代码将类似于[attr.checked]=checkedArray[index]。请注意，使用 ngFor 时可以访问索引。更新“添加”按钮，在 checkedArray 中添加一个新条目，以对应新添加的复选框。

【讨论】：