Angular does not change a model property in <select> tag when using it with web workers

I have the following component in Angular:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<form>
<select name="selectedValue" id="selectedValue" [(ngModel)]="selected">
<option value="-1"></option>
<option *ngFor="let v of [1,2,3]"
[value]="1">{{v}}
</option>
</select>
<p>The selected number is {{selected}}</p>
</form>
`,
providers: []
})

export class AppComponent {
private selected = -1;
}


When testing on the browser, the selected property won't get updated when the user selects an option. So, the paragraph in the output is always equal to The selected number is -1.

If I remove the ngFor inside the select, the <select> tag will respond.

This component is also run inside a web worker. If I go back to a BrowserModule, the <select> tag will also respond.

The code is available in the following github repo.

UPDATE:

I changed [value]="1" to [value]="v", but the output is always The selected number is -1.

Continue reading...