Создать динамический флажок angular2 typescript

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> 

При нажатии кнопки «Добавить» я просто нажимаю новое значение на массив 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} 

этот.arrayofLevels.push (newEvent);

Answer 1

Попробуйте установить состояние checked с использованием односторонней привязки по самому атрибуту HTML checked. Вы можете связать атрибут каждого флажка checked к коллекции (например checkedArray = [false,false,false,false]) that maintains the проверяемой states. You can then manage and update the checked` состоянию каждого флажка извне с помощью этой коллекции.

Вашего кода шаблона затем будет похож на [attr.checked]=checkedArray[index]. Обратите внимание, что индекс доступен, когда с помощью ngFor. Обновите кнопку «Добавить», чтобы добавить новую запись в checkedArray для соответствующего нового флажка.