Angular 6 - Binding item not updating after data change

Question

In my HTML I am binding an item in a repeat:

<ul *ngFor="let item in items">
    <li>{{ item.id }}</li>
</ul>

This is working fine. But now that value is being changed in an API call, like so:

doApiCall(){
    let value = this.items.find( x => x.id = '123');
    this.service.doIt().subscribe(
        (res: HttpResponse<myModel>) => {
            // response === { id = 456' }
            return value = res.body;
        }
    )
}

now the item in the array has changed, but the view does not change. But the funny thing is, if I change the let value manually right after it is set, like so:

let value = this.items.find( x => x.id = '123');
value.id = '345'

then the update happens. So I do not know If I am doing something wrong in the API call.

Just FYI {{ item.id }} is a 1-way binding. 2-way bindings are used with [(ngModel)] — Jonas Praem
– Jonas Praem, Commented Feb 12, 2019 at 9:18
@JonasPraem What? How you want to make 2-way binding on template without <input>? — web.dev
– web.dev, Commented Feb 12, 2019 at 9:26
@web.dev Unrelated to OP's issue. But would you want a 2-way binding anywhere else than where the user can change the value? I was referring to OP's title — Jonas Praem
– Jonas Praem, Commented Feb 12, 2019 at 9:29

web.dev · Accepted Answer · 2019-02-12 09:25:46Z

4

It seems like you need to refresh how JavaScript works. You are returning value = res.body value. But what's that? That won't even work.

It seems like items is array of objects which are reference types. When you are trying to do value = res.body you are not changing anything inside items array at all. You are just reassigning reference which is stored in value variable, but your item found with Array.find function is untouched. Maybe you should try doing something like

doApiCall() {
    let value = this.items.find(x => x.id = '123');
    this.service.doIt().subscribe(
        (res: HttpResponse < any > ) => {
            value.id = res.body.id;
            value.someproperty = res.body.property;
        }
    )
}

But I don't know your HttpResponse.body model. That's why you should response Promise<T> from service instead of HttpResponse<any>. You are using TypeScript, so make it useful!

answered Feb 12, 2019 at 9:25

web.dev

3591 silver badge6 bronze badges

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

4 Comments

manneJan89 Over a year ago

Thanks, my HttpResponse actually has a model. Sorry, my mistake, should have clarified. But individually assigning my values solved the issue. Thank you. But why is my object a reference inside the method but the values are not

web.dev Over a year ago

Okay, let's say that you have two models: ModelA { property1: number; property2: number; property3: ModelB; } ModelB { property1: string; property2: number; } If you are storing array of ModelA, you are storing references to ModelA object. Then if you use array.find to get ModelA, now you can access: ModelA.property1 - value type. ModelA.property2 - value type. ModelA.property3 - reference type. ModelA.property3.property1 - value type. You need to know which types are references and which are values. In simple words, every object is reference type.

web.dev Over a year ago

That's core concept of programming. Just type "reference vs value type JavaScript" in DuckDuck or Google, you will find something.

manneJan89 Over a year ago

Perfect. Thank you so much for the support!

Collectives™ on Stack Overflow

Angular 6 - Binding item not updating after data change

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related