Angular 8>我从Http.Subscribe正确获取数据，但是未定义

如何解决Angular 8>我从Http.Subscribe正确获取数据，但是未定义

一个简单的Http.Get，我错过了一些东西，但我不知道那不是什么。

this.http.get<Reserve[]>(this.url).
subscribe(result => {
    this.reserves = result;
        console.log('Data from source:',result,'Data when load:',this.reserves)
    },error => console.error('Loading reserve error',error));

console.log('Data after Load',this.reserves);

控制台结果表明已实际捕获数据（来自源的数据和加载时的数据）：

Console results

Data from source: (5) [{…},{…},{…}]0: {id: 1,restaurantId: 1,restaurant: {…},dateReserve: "2020-05-17T21:00:00",ranking: 1, …}1: {id: 2,restaurantId: 2,dateReserve: "2020-05-18T20:00:00", …}2: {id: 3,restaurantId: 4,dateReserve: "2020-05-20T19:00:00",ranking: 4, …}3: {id: 4,dateReserve: "2020-05-21T20:00:00",ranking: 5, …}4: {id: 5,ranking: 2, …}length: 5__proto__: Array(0) 
Data when load: (5) [{…}, …}length: 5__proto__: Array(0) 

但是“加载后的数据”是未定义

解决方法

您可以在内部调用您的方法来订阅以执行加载数据后想要做的事情：

Playground link

type Email<T extends string> = T &
  CheckMaxLength<T,32,RestrictedToChars<
    `${lowercase T}`,AllowedChars,T,["Email can only contain alphabet or @ or ."]
  >,["Email needs to be 32 characters or less"]>;

type User<T extends string> = {
  name: string;
  email: Email<T>;
}

或返回可以订阅的任何地方使用结果：

Angular 2+ wait for subscribe to finish to update/access variable

const user = <T extends string>(user: User<T>) => user;

user({ name: "Dave Morrison",email: "[e-mail]" }); // okay
user({ name: "Van Morrison",email: "[e-mail]" }); // error!
// ------------------------> ~~~~~
// '["Email can only contain alphabet or @ or ."]'
user({ name: "Jim Morrison",email: "[e-mail]" }); // error!
// ------------------------> ~~~~~
// '["Email needs to be 32 characters or less"]'

在您设置的方法中

 export class myClass {
  myVariable: any;

  myFunction() {
    this.myService.getApi().subscribe(data => {
      this.myVariable = data;
      this.update()
    });

    this.update()
  }

  update(){
    console.log(this.myVariable);
  }
}

或者使用await等到结果准备好：

Angular 6 wait for subscribe to finish

getNumber(value) {
    return this.myService.getApi(value).pipe(tap(data => {
        this.myVariable = data;
    }));
}

,

您将变得不确定，因为它是一个异步方法，不会等待从服务器获得响应。 尝试使用async / await或在其中打印值然后阻止

    this.http.get<Reserve[]>(this.url).subscribe(result => {
        this.reserves = result;
        console.log('Data from source:',result,'Data when load:',this.reserves)
        console.log('Data after Load',this.reserves);
    },error => console.error('Loading reserve error',error));