观察者订阅第一次没有加载，第一次加载到组件时没有触发

Question

I have a fetch-person component which loads some data in perList: Observable<Person[]> . Then at first time the data doesn't load to the this.personList (from login page to fetch-person component RouterModule.forRoot([{ path: '', redirectTo: '/fetch-person', pathMatch: 'full'}) However, After I click on other page and click on header <a class="nav-link text-dark" [routerLink]='["/fetch-person"]'>Fetch Person</a> , it would return the data to the this.personList . I came up with my code (code is in Typescript):

How can I get the data from the first load?

fetch-person.component.ts

@Component({
  selector: 'app-fetch-person',
  templateUrl: './fetch-person.component.html',
  styleUrls: ['./fetch-person.component.css']
})

@Injectable()
export class FetchPersonComponent implements OnInit {
    [x: string]: any;

  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

  SearchpersonForm: FormGroup;
  loading$: Observable<Boolean>;
  error$: Observable<Error>
  public perList: Observable<Person[]>;
  personList: Person[];
  pagedList: Person[] = [];
  breakpoint: number = 3; 
  length: number = 0;
  pageSize: number = 25;  //displaying three cards each row
  pageSizeOptions: number[] = [5, 10, 25, 100];

  //, private decimalPipe: DecimalPipe
  constructor(private _fb: FormBuilder, private store: Store<AppState>) {
    this.SearchpersonForm = this._fb.group({
      name: ['', [Validators.required]]
    })
  }
  
 ngOnInit() {
      this.store.dispatch(FetchPerson());
     this.perList = this.store.pipe(select(getPersons));
     this.perList.subscribe(result => { this.personList = result; } );<-- **there is no data for the first load from redirectTo: '/fetch-person', however, there are some data after second load from [routerLink]='["/fetch-person"]'**
      this.pagedList = this.personList;
     this.length = this.personList.length;
 }

Answer 1

The issue with your code is that the subscribe is an observable and runs asynchronously. So the code below the subscribe executes prior to the the population of the variable.

I would also subscribe before dispatching, just for clarity.

 ngOnInit() {
      this.store.pipe(select(getPersons))
                .subscribe(result => { 
                                      this.personList = result;
                                      this.pagedList = this.personList;
                                      this.length = this.personList.length; 
                                   });

      this.store.dispatch(FetchPerson());
  
 }