Angular - 在另一個組件中使用由回調設置的服務屬性

Question

我正在嘗試使用等待回調的DataService屬性myData 。 但是當我調用DataComponent時它是未定義的。 我如何在那里訪問和使用它？

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 {
  }
}

這是源代碼： https://stackblitz.com/edit/angular-ivy-kbpdpo