Using Angular 11 AsyncPipe only show data when page initiated but missing when refresh the page

Question

I\'m learning Angular 11 and I got stock with AsynePipe, here are my code below:

Component:

import { Component, OnInit } from \'@angular/core\';
import { R