Angular - 在另一个组件中使用由回调设置的服务属性

Question

I am trying to use a DataService property myData that is waiting for callback. But it is undefined when I call in DataComponent . How can I access and use it there?

export class DataService {
  public myData;

  constructor(private http: HttpClient) {
    this.load().then((data) => {
      this.myData = data
    })
  }

  load() {
    return new Promise((resolve) => {
      this.http.get('https://reqres.in/api/users').subscribe(
        (res: any) => {
          console.log(res.data)
          resolve(res.data)
        },
        (error) => {
          console.log(error);
        }
      )
    })
  }
}

export class DataComponent implements OnInit {
  constructor(private dataService: DataService) {
    this.prepareData();
  }

  prepareData() {
    console.log(this.dataService.myData)
  }

  ngOnInit(): void {
  }
}

Here is the source code: https://stackblitz.com/edit/angular-ivy-kbpdpo

Answer 1

You are running into a race condition since this is an asynchronous function.

This change works: https://stackblitz.com/edit/angular-ivy-vf3llg

Consider reading up on https://angular.io/guide/http

Personally, I just have services return raw data and manipulate it elsewhere, but if needed you can tap into the response as I have shown i the updated example.

This question and answer are probably really a duplicate of this question...

What are pipe and tap methods in Angular tutorial?

Answer 2

your load() method is asynchronous, that means that it can return the response after 2 hours, so it will execute your callback after 2 hours, and you are asking myData synchronously which means that you are asking it right now, so it won't work.

you have to wait until the answer is returned, in your code there is no chance to accomplish this, so either remove yourData field and just subscribe it into the component, or create BehaviorSubject and emit value to the component