Как инициализировать данные компонента, вызвав службу через HttpClient

Question

Я вижу десятки подобных сообщений, но ни одно из решений не помогло мне. Поэтому, пожалуйста, не отвечайте, отправив меня на чтение других постов, потому что я сделал это, прежде чем писать здесь. Я пытаюсь инициализировать свойство компонента, вызывая службу. вот код компонента:

export class MyComponent implements OnInit {
  myData: number[];

  constructor(@Inject(MyService) private myService: MyService) {
}

ngOnInit() {
  this.myService.getMyData().subscribe(data => this.myData = data);
}

Сервисный код выглядит следующим образом:

@Injectable()
export class MyService implements OnInit {
  private numbers: Observable<number[]>;

  constructor(@Inject(HttpClient) private http: HttpClient) {}

  getMyData(): Observable<number[]> {
    return this.numbers;
  }

ngOnInit() {
 this.http.post<MyDataResponse> (this.url, new MyDataRequest(100))
   .subscribe(resp => this.numbers = 
   observableOf(resp.data));
}

Во время выполнения я получаю следующее исключение:

ERROR TypeError: Cannot read property 'subscribe' of undefined
at .../MyComponent.ngOnInit (...)
at checkAndUpdateDirectiveInline (core.js:18620)
at checkAndUpdateNodeInline (core.js:19884)
at checkAndUpdateNode (core.js:19846)
at debugCheckAndUpdateNode (core.js:20480)
at debugCheckDirectivesFn (core.js:20440)
at Object.eval [as updateDirectives] (...)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:20432)
at checkAndUpdateView (core.js:19828)
at callViewAction (core.js:20069

Итак, чтобы возобновить, компонент подписывается на наблюдаемое, возвращаемое службой, вызывая конечную точку отдыха. Остальная конечная точка работает как положено, вызывается правильный код и возвращает правильный ответ. Исключение, вероятно, связано с асинхронным типом операции, но я не знаю, как мне с этим бороться. Кроме того, мне не нужно, чтобы операция была асинхронной, но, как это ни удивительно, я не нашел способа выполнить синхронные вызовы покоя в угловых. Может ли кто-нибудь пролить свет на это? Спасибо заранее. Nicolas

Answer 1

Возможно, вы используете переменную this.numbers в getMyData(), прежде чем станете наблюдаемой, поэтому ваша ошибка undefined.

То, что вы, вероятно, хотите сделать, выглядит примерно так:

ngOnInit() {
    this.numbers =  this.http.post<MyDataResponse> (this.url, new MyDataRequest(100));
}