Angular QueryList更改

Question

I have a component "ProductList" that contains "Product" components. When the list changes I want to remove old eventlistener and add a new one...........

@ViewChildren(ProductComponent) products: QueryList<any>;

Then I subscribe to the QueryList changes in ngAfterViewInit hook

this.products.changes.subscribe(products => {
 console.log(‘changes’, this.products.length);
});

The problem is that it fires twice when the querylist is updated.. once before the list is updated and once after.. ??

Answer 1

You do not need to remove listeners and add new ones when the list changes. QueryList is updated as the new elements arrive.

See what the docs have to say about it:

An unmodifiable list of items that Angular keeps up to date when the state of the application changes.

Documentation