Невозможно присвоить значение переменной в ngOnInit ()

Question

Я вызываю api в ngOnInit () , и я хочу сделать еще несколько вещей с данными из api в ngOnInit () .

Но когда Я пытаюсь console.log () мои данные не определены и не могу обработать больше. Когда я console.log () те же данные в методе getUsers () , когда я подписываюсь на данные из службы, у меня есть массив с данными json. Ответ API:

{"items":[{"id":"1","name":"Adam","age":20},{"id":"2","name":"Cris","age":32}]}

UserResults - это все мое JSON. И мне нужны только пользователи в моем массиве пользователей, а не элемент.

service.ts

public getUsers(): Observable<UserResults> {
    return this.httpClient.get<UserResults>(baseURL);
  }

component.ts

export class SidebarComponent implements OnInit {
  usersResult: UserResults;
  users: Users[];


  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.getUsers();
    // shouldn't be users array available ???
    console.log(this.getUsers()) // undefined
    ///more calculations
  }

  private getUsers() {
    this.dataService.getUsers().subscribe(
      data => {
        this.users = data.items;
    console.log(this.getUsers()) // correct data in json array
      }
    )
  }
}

Как мне с этим справиться наилучшим образом ?

Answer 1

Вы пытаетесь console.log свой метод, который ничего не возвращает и является асинхронным, а не возвращаемыми данными.

Если вам действительно нужны данные в ngOnInit, вам необходимо подписаться на Наблюдаемый внутри, а не в отдельном частном методе.

Обратите внимание, что это, как правило, не лучший способ обработки данных, возвращаемых из HTTP-запроса. В зависимости от того, как потребляются данные, вы обычно хотите создать Observable в своем коде TypeScript и подписаться на него в шаблоне с помощью канала async, где это возможно. Например:

component.ts:

this.users$ = this.dataService.getUsers().pipe(
  map(data => data.items) // this is now an Observable<User[]>
);

component. html:

<div class="user-pane" *ngFor="let user of (users$ | async)">

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