Question

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

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

单击Add按钮时，我只是将新值推送到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）;

Answer 1

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

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

创建动态复选框angular2打字稿

1 个答案: