当显示可观察的数据时，角度显示未定义

Question

对不起，那个坏标题。我正在使用httpclient从api获取数据，当我console.log订阅中的数据时，一切正常，但是当我这样做时：this.launches = data，然后尝试console.log我看到的是“未定义”控制台

    launches:LaunchRootObject;

    showLaunches(){
    this.client.GetAllLauches().subscribe((data:LaunchRootObject) =>{
      console.log(data); //this is working
      this.launches = data;
    });
    }

    ngOnInit(): void {
    this.showLaunches();
    console.log(this.launches)  //this shows "Undefined"
  }

这是http服务的一部分：

    GetAllLauches(){
    return this.http.get<LaunchRootObject>(this.base_url + 'launch');
  }

Answer 1

它是异步的，ngOnInit在showLaunches（）之前执行。会发生什么：

1. ngOnInit（）由angular调用
2. this.showLaunches（）由ngOnInit调用
3. this.client.GetAllLauches（）被调用（未完成）
4. console.log（this.launches）被调用，但是http尚未完成，这就是为什么您看到未定义的原因
5. this.client.GetAllLauches（）完成并获得您的订阅
6. console.log（数据）;有效
7. this.launches现在正在分配，但为时已晚

如果要在onInit可用时打印数据，则可以使用类似的方法：

    const subscription: new Subscription();
            
    ngOnInit(): void { 
        this.subscription.add(this.client.GetAllLauches()
            .subscribe((data:LaunchRootObject) => { 
                console.log(data); //this is working
                    this.launches = data;
                })
            })
    }
           


      

Answer 2

订阅用于处理异步方法调用。因此，仅当异步方法返回其结果（在您的情况下为http调用）时，才会执行subscribe（）方法中的代码。

在等待异步响应时，程序将继续并执行console.log（this.launches）。

这就是为什么您的console.log（this.launches）在console.log（data）之前和订阅方法回调this.launches之前执行的原因。