* ngFor与异步管道和热套接字连接的循环可观察到？

Question

Suppose we have alerts rendering into a list using *ngFor like this:

*ngFor="let alert of alerts | async"

Is it possible to have the alerts property be a hot observable that is being pushed to by the server and causing the list containing the alerts to refresh correspondingly? If so what type of Observable(s) would be appropriate in this type of context?

Answer 1

The async pipe subscribes to the Observable for you and subsequently cleans up the Subscription when it is no longer needed. You can apply the async pipe to any Observable, hot or cold, and it will create a new Subscription to render the content of that Observable to the template (or pass it to a child component through an input). For example, let's say I have an alerts$ Observable:

alerts$: Observable<Alert[]> = alertService.getAlerts();

And I want to render a list of those alerts, like you show in your question:

<ul>
  <li *ngFor="let alert of alerts$ | async">{{ alert }}</li>
</ul>

I can also subscribe to the alerts$ Observable in my template and do stuff with the data there.

Let's make another property to hold the alert and a property to hold the subscription for cleanup.

mostRecentAlert: Alert;
alertsSubscription: Subscription;

And give it a value in the ngOnInit lifecycle hook.

ngOnInit() {
  this.alertsSubScription = alerts$.subscribe((next: Alert[]) => {
    mostRecentAlert = next[0];
  }
}

Then clean it up in the ngOnDestroy lifecycle hook.

ngOnDestroy() {
 this.alertsSubscription.unsubscribe();
}

alerts$ is now technically a "hot" Observable because it has an active subscription, but you can still use it in your template as before.

In short, the async pipe is just a handy tool for subscribing to Observables in the template. It allows you to render asynchronous data without handling any of the clean up.

To answer your question about what type of Observables would be appropriate for this context: whenever you are getting data through some sort of service or store (if you're using ngrx or something similar), it will most likely arrive as a stream. Even Angular's Http utilities use rxjs Observables. This allows you to use all of the powerful rxjs operators to mold your data into the form you want and just leave that final Observable "cold" in your component class. Then just throw the async pipe on it in your template and you have a very neat way to render asynchronous data or pass it into other components.