Angular select value on change not updating

Question

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;
    }
}

Answer 1

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)
  });
}