I played with your stackblitz setup. Got it to work by adding a setTimeout
like this:
changeJobItemReplacementType(jobItem: JobItem, supplierType: string) {
console.log('changed value to: ', supplierType)
console.log('jobItem current: ', jobItem)
setTimeout(() => {
jobItem.supplierType = jobItem.originalValues.supplierType;
console.log('jobItem.supplieType modified back to original: ',jobItem)
});
}
When select
is changed, change the value to something else other than selected. I have a feature where only 4 item types can be selected at one time, if more than 4 are chosen it changes the value back to what it was before change.
The model is being updated with the correct value but the template isn’t reflecting the change.
Template – i’ve changed from (change)
to (ngModelChange)
after reading Select change event occurs before ngModel updates on angulars github.
<tr *ngFor="let jobItem of job.jobItems">
<td>
<select
[disabled]="job.completed"
[(ngModel)]="jobItem.supplierType"
(ngModelChange)="changeJobItemReplacementType(jobItem, $event)">
<option *ngFor="let supplierType of supplierTypes" [ngValue]="supplierType">
{{ supplierType }}
</option>
</select>
</td>
</tr>
Event
changeJobItemReplacementType(jobItem: JobItem, supplierType: string) {
// THIS IS UPDATING BUT NOT REFLECTING IN TEMPLATE
jobItem.supplierType = jobItem.originalValues.supplierType;
}
}
changeJobItemReplacementType(jobItem, $event) expects two params, the second is not the change event.