I have a bootstrap modal dialog which contains some checkboxes. Each checkbox represents a category from the database and I need to tick the checkbox only if the user is interested on that category.
following is my html for the modal
<div *ngIf="_user" id="categoryModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" id="categoryDiv">
<div class="row">
<div *ngIf="_tenderCategories">
<span *ngFor="let category of _tenderCategories; let i = index;">
<div class="col-md-4">
<div class="checkbox">
<label>
<input id= type="checkbox" class="category-checkbox" [checked]="isUserInterested(category)" (change)="onCategoryCheckBoxClick(category)">
<p class="tender-category" style="cursor: pointer;"></p>
</label>
</div>
</div>
</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
As you can see, in order to tick the checkbox, I call the function isUserInterested(category).
The problem I face is, when the page reloads only, the function I mentioned gets called. The modal above appears when I click a link on my html page; but the function does not get called in that case. By the time I click the above mentioned link, the component has all the data required for the function to execute.
isUserInterested(category: Category) {
if (this._user.interestedCategories.indexOf(category) > -1) {
// if the _user.interestedCategories list contaians the category, that category should be shown as marked
console.log("Category "+category.id+" interested");
return true;
} else {
return false;
}
}
Why I am not getting the expected behavior? How can I get this implemented in the way I expect?
Aucun commentaire:
Enregistrer un commentaire