I have an html structure with a component inside a component (forgot the proper word for it).
working basicly like this (largely simplified):
main html:
<div *ngFor="let item of data">
<app-item [item]="item"></app-item>
</div>
<button (click)="addItem()">Add</button>
item html:
<div>{{item.name}}</div>
<button (click)="deleteItem()">Delete</button>
inside the app-item I display several items out of a list. The list gets it's data straight out of the database via an http.get request.
Now I also have functionality to add or delete items which both work (items get added or removed respectively to or from the database just fine). Though the change detection does not pick any of it up and the site needs to be refreshed (via F5 for example) to display the changes.
I checked the code (not all of it is from me) and couldn't find any specified change detection strategie.
I also tried to manually tigger change detection from the add and delete function via the ChangeDetectorRef (this.ref.detectChanges();
).
Though that also did not take away the need to manually refresh the page to see the changes.
Now what am I missing for change detection to pick this up? Or alternatively, how can I manually trigger it within my add/delete methods?
Doing so is often more cumbersome and performs less well than making changes to entities in the normal way. The intention of this document is to inform as to when detecting changes is needed and when it is not. The intention is not to encourage avoidance of change detection.
05-09-2020 06:20 AM While looking at new features for April 2020 update, we have change detection feature for Direct Query reports. It would have been great to have this for my Import reports too.
14 Change detection does not trigger when the formgroup values change 3 Run Angular change detection only once and stop detecting changes for that component Hot Network Questions how can i add an offset to an existing bone?
It is mentioned that if you add element in array or remove element from array change detection might not get fired automatically. Since you are not changing object that is it points to same reference.
Since you are adding or deleting element in existing array angular is not able to pick the changes.
For this to work you can do like
items= items.slice();
Object.assign
method as items= Object.assign([],items);
To manually fire change detection you can follow answer on this link
Inject ChangeDetectorRef
in your component and then use detectChanges()
method of that object to fire change detection manually.
constructure(private cd: ChangeDetectorRef) {}
someMethod() {
this.cd.detectChanges();
}
If you use a spread operator instead of push it should work.
this.data = [...this.data, newItem];
The reason for this is that angular detects a change when the whole object changes, or the reference changes, so a mutation isn't going to trigger it. So rather than mutating the array, you need to make it a new array.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With