I have been trying to connect isSelected to an object wrapped in an observable. When I attempted this without the observable, it worked perfectly fine. However, within my component, I am facing an issue where measure.isSelected always returns false, even when the checkbox is checked.
<tr *ngFor="let measure of criteriaSelectedMeasures$ | async ; let i = index">
<td>{{measure.type}}</td>
<td>{{measure.equipment}}</td>
<td>{{measure.axis}}</td>
<td>{{measure.direction}}</td>
<td>{{measure.pr}}</td>
<td>{{measure.section}}</td>
<td>{{measure.agregation}}</td>
<td>{{measure.measureType}}</td>
<td>{{measure.qualification}}</td>
<td>
<p-checkbox name="criteria-measure-{{i}}" binary="true" [(ngModel)]="measure.isSelected"></p-checkbox>
</td>
</tr>
Within my component :
this.criteriaSelectedMeasures$.subscribe(list => {
this.store.dispatch(new AddMeasureDefinitionsAction(list.filter(m => m.isSelected))); <-- here isSelected is always false
});
I believe that two-way binding is not working correctly here because the async pipe or subscribing to the observable creates a different object with another reference.
Do you think I am correct? Is there a different approach I can take to resolve this issue? (perhaps utilizing ngModelChange?)