Angular ngModel not updating when setting variable

Question

I am using Angular 4 and Typescript, I have a table of <select>s in my template:

<tr *ngFor="let task of tasksDetails">
    <td>{{task.name}}</td>
    <td>
        <select class="form-control" [(ngModel)]="task.uiMetadata.worker">
            <option value="">Select worker</option>
            <option *ngFor="let worker of workers" [value]="worker.resource.id">{{worker.resource.name}}</option>
        </select>
    </td>
</tr>

Within another component I am able to add/remove to the workers list and it is output to a Subject which this component subscribes to:

this.workerRemoved.subscribe(worker => {
    _each(this.tasksDetails, taskTemplate => {
        if (taskTemplate.uiMetadata.worker === member.resourceId) {
            taskTemplate.uiMetadata.worker = '';
        }
    });
});

The problem is that while the subscription updates the field in the variable, ngModel is not picking up the change and reflecting it in the UI.

So we end up with the situation where ng-reflect-model is showing "11", the worker variable is an empty string, and the select shows as blank because the "11" option has been removed.

How do I get Angular to keep the model in sync with the change I made in the subscription? I have tried wrapping it in an NgZone.run() and also calling ChangeDetectorRef.detectChanges() but neither would update the ng-reflect-model value.

Here is a Plunker reproducing the error

@yurzui you should provide it as an answer so that OP can accept it :-) — eko
– eko, Commented May 29, 2017 at 4:34

BeaverusIV · Accepted Answer · 2017-05-30 19:50:29Z

2

I found the solution thanks to yurzui pointing me in the right direction:

if (taskTemplate.uiMetadata.worker === member.resourceId) {

changes to

if (+taskTemplate.uiMetadata.worker === +member.resourceId) {

So that the strict equality is comparing numbers. The form input was converting the value into a string. Sometimes the easy ones can get ya.

answered May 30, 2017 at 19:50

BeaverusIV

1,0081 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ngModel not updating when setting variable

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related