Как передать значение из ngOnInit в функцию

Question

Мне интересно, как передать значение из ngOnInit, чтобы оно работало в том же компоненте.

Вот мой пример. Я получаю данные из API, чтобы отобразить контекст моей страницы. Позже, когда я нажимаю кнопку, я хочу использовать эти данные, но в console.log я получаю значение undefined. Как это не определено, ведь данные уже были загружены и отображены на моей странице.

...
 clientId1;
 clientId2;
 clientNote;
 errorMsg;

 ngOnInit() {
    this.clientId1 = this.route.parent.snapshot.paramMap.get('userId1');
    this.clientId2 = this.getMethodClientId2();
  }

  getMethodClientId2(): void {
    this.userService.getUser().subscribe(
      (data) => {
        this.clientNote = data.ClientNotes;
      },
      (error) => (this.errorMsg = error)
    );
  }


  postMethodOnClick() {
    console.log(this.clientId1);
    console.log(this.clientId2);
}
...

Answer 1

Здесь несколько проблем.

1. Переменной clientNote присваивается значение асинхронно. Таким образом, если вы должны получить доступ к данным вне подписки, у вас нет контекста того, назначены ли данные или нет.

2. clientId2 переменная не содержит возможного идентификатора клиента, она на данный момент ничего не держит. Судя по названиям вашей функции, я считаю, что вы пытались это сделать

 ngOnInit() {
    this.clientId1 = this.route.parent.snapshot.paramMap.get('userId1');
    this.getMethodClientId2();    // <-- don't assign here, you aren't returning anything from the asynchronous function
  }

  getMethodClientId2(): void {
    this.userService.getUser().subscribe(
      (data) => {
        this.clientNote = data.ClientNotes;
        this.clientId2 = data.ClientId;  // <-- I assume the property is called `ClientId`.
      },
      (error) => (this.errorMsg = error)
    );
  }

Опять же, переменная this.clientId2 назначается асинхронно, поэтому, если вы должны были вызвать функцию postMethodOnClick() до того, как значения будут присвоены, в журнале консоли все равно будет undefined.

См. здесь для получения дополнительной информации о том, как получить доступ к асинхронным c данным.