Why is the angular 11 async pipe not stabilizing with a delayed observable?

Question

I am subscribing to a delayed observable via async pipe in angular 11.

For some reason change detection(?) will not stabilize and the pipe will not receive the values and I can't figure out why? Instead of showing my data it shows null.

example: https://stackblitz.com/edit/angular-async-pipe-with-delay?devtoolsheight=33&file=src/app/app.component.html

html

<h1>{{ getData(0) | async | json }}</h1>

component

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private dataService: DataService) {}
  getData(id: number) {
    return this.dataService.getDataDelayed(id).pipe(tap(console.log));
  }
}

service

const data = [
  {
    id: 0,
    data: 'hello'
  }
];

@Injectable()
export class DataService {
  constructor() {}

  getDataDelayed(id: number) {
    return of(data[id]).pipe(delay(5000)); // works fine without the delay
  }
}

Answer 1

You need to be careful when you use the async pipe on a function call. The async pipe keeps a reference to the observable and subscribes to it. When you use the getData function call, a new observable is created each time there's a change detection, and so the async pipe subscribes to the new observable and doesn't wait for the previous one anymore.

What you could do change the getData method to keep a reference to the observable so it always return the same observable for a given id.

  private data: Observable<any>[] = [];

  getData(id: number) {
    if (!this.data[id]) {
      this.data[id] = this.dataService
        .getDataDelayed(id)
        .pipe(tap(console.log));
    }
    return this.data[id];
  }