Angular - Использование служебного свойства, установленного обратным вызовом в другом компоненте - PullRequest
0 голосов
/ 20 июня 2020

Я пытаюсь использовать свойство 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

Ответы [ 2 ]

1 голос
/ 20 июня 2020

Вы находитесь в состоянии гонки, поскольку это асинхронная функция.

Это изменение работает: https://stackblitz.com/edit/angular-ivy-vf3llg

Считайте чтение на https://angular.io/guide/http

Лично у меня просто службы возвращают необработанные данные и манипулируют ими в другом месте, но при необходимости вы можете нажать на ответ, как я показал в обновленном примере.

Это вопрос и ответ, вероятно, действительно дублируют этот вопрос ...

Что такое методы труб и ответвлений в Angular учебнике?

0 голосов
/ 20 июня 2020

ваш метод load() является асинхронным, это означает, что он может вернуть ответ через 2 часа, поэтому он выполнит ваш обратный вызов через 2 часа, а вы запрашиваете myData синхронно, что означает, что вы спрашиваете его прямо сейчас , поэтому это не сработает.

вам нужно подождать, пока ответ не будет возвращен, в вашем коде нет шанса выполнить sh это, поэтому либо удалите поле yourData, либо просто подпишите его в компоненте , или создать BehaviorSubject и передать значение компоненту

...