初始化函数如何工作？

Question

为什么console.log("init2");在console.log("init1");之前被打印？当我在内部执行console.log(categories);时，我在控制台中得到了正确的数组，但是当我在外部执行了console.log(this.categories);时，我没有在控制台中得到该数组，而是输出未定义。为什么？我应该如何纠正？

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CategoryService } from 'src/app/modules/common/services/category.service';
import { CourseService } from '../../services/course.service';
import { mergeMap, map } from 'rxjs/operators';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit, OnDestroy {

  categories: any[];
  courses: any[];
  sub: Subscription;

  constructor(private categoryService : CategoryService, private courseService : CourseService) { }

  ngOnInit() {
    this.sub = this.categoryService.getAllcategories()
    .pipe(
      mergeMap(categories => this.courseService.getAllCourses().pipe(
        map(courses => [categories, courses])
      ))).subscribe(([categories, courses]) => {
        this.categories = categories;
        this.courses = courses;
        console.log("init1");
        console.log(categories);
      });
      console.log("init2");
      console.log(this.categories);

  }

  getCoursesByCategory(key: any)
  {
      //console.log(key);
      return this.courses.filter(course => course.category == key)
  }

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

}

Answer 1

[当您使用返回可观察值的函数时，getAllCourses就是这种情况，调用是异步的。因此，如果调用非常快，则可以在显示init2之前显示init1。因此，行为和代码都可以。

您应该在这里看看，以更好地理解它们的工作原理：https://angular.io/guide/observables