Leveraging angular's change detection
You can try this.
.subscribe(addressArray =>
addressArray.foreach(
address => this.addresses.push(address)
)
);
or this:
.subscribe(addressArray => {
for (const address of addressArray){
address => this.addresses.push(address);
}
});
These two approaches do not work well with angular change detection since they're are mutating an existing array rather than creating a new array.
These approaches both create new arrays and angular change detection will have an easy time spotting.
this:
.subscribe(addressArray =>
this.addresses = this.addresses.concat(addressArray)
);
or this:
.subscribe(addressArray =>
this.addresses = [...this.addresses, ...addressArray]
);
They're all very similar ways of achieving the same thing.
Leveraging Angular's async Pipe
Here's a very different way: Output your result array directly in your stream!
Instead of an array like this:
addresses: any[] = [];
You have an Observable and a Subject like this:
newAddresses = new Subject<any[]>();
addresses = newAddresses.pipe(
scan((acc, val) => ([...acc,...val]), [])
)
Then your search emits results directly to your subject.
const URL ='some url';
onSearch() {
this.httpClient
.get(`URL${{some data to generate the http observable}}`)
.subscribe(response => this.newAddresses.next(response.address));
}
Now in your HTML, you can subscribe to this array using angular's async pipe
<button (click)="onSearch()"> search address </button>
<ul *ngFor="let address of addresses | async">
<li>{{address.one}} - {{address.two}} - {{address.three}}</li>
</ul>
This is a reasonable amount of extra work. So why bother?
- Flexibility: Now any number of methods can update your addresses, and they'll all get managed by
scan in a uniform way.
- Maintainability: If you want to change or format addresses in the future, there's a simple & singular place to do it.
- Extenability: You can add in fancy RxJS operators like
debounce to control how results appear on the screen. It's a really nice way to stop display-stuttering when events get queued up.
- Performance: If your application relies on pushing data rather than binding it, you can turn off angular's change detection entirely and boost the performance of your app :).
Even if you're not going to turn off change detection, you can mutate a massive array in memory and not worry about whether change detection will pick it up or need to explicitly tell change detection to check the contents of your array for changes.
