Hey there developers, I've been encountering an issue while trying to bind my dynamically generated checkboxes to an array in my project. In my users.template.html file, I have the following code snippet:
<div *ngFor="let r of roles" class="checkbox">
<label for="">
<input type="checkbox" id="{{ r.name }}" (change)="onRoleChange(r.name, $event)" [checked]="userRoles.includes(r.name)"> {{ r.name }}
</label>
</div>
Essentially, this code is meant to update the roles assigned to a user based on dynamically generated checkboxes. While the (change) event works perfectly, I'm getting an error with the [checked] property:
Cannot read property 'includes' of undefined
I've tried looking for solutions online, but I'm puzzled as to why this error is occurring when this type of binding is recommended for dynamic content. Any insights or advice on this issue would be greatly appreciated. Thanks in advance!