Угловая подписка push-объекта в массив

Question

Я делаю угловое приложение и где у меня пустой массив, например,

  users: any = [];

Затем я делаю сервисный вызов в ngOnInit, чтобы сохранить данные в массиве users, как,

  ngOnInit() {

    //Getting the data from json
    this.httpClient.get('https://api.myjson.com/bins/n5p2m').subscribe((response: any) => {
      console.log("response", response.data);
      response.data.forEach(element => {
        //Pusing the data to users array
        this.users.push(element);
      });
    })

    //Trying to get the complete array after push of the element from the service response data
    console.log("users array", this.users);
    //But it shows empty array
  }

Но я не могу получить данные в console.log("users array", this.users);, потому что сервисный вызов задерживается ..

Как вставить данные в this.users и когда мы вызываем снаружислужбы должны иметь заполненные данные и не быть пустыми, как сейчас ..

Также сделан рабочий стек стека относительно него https://stackblitz.com/edit/angular-q3yphw

Пожалуйста, смотрите консоль, котораяимеет текущий результат ..

Текущий результат в console.log("users array", this.users); - пустой массив [] .

Так что я ожидаю следующий результат в console.log("users array", this.users); вне службы и внутри ngOnInit,

[
{"id":1,"value":"User One"},
{"id":2,"value":"User Two"},
{"id":3,"value":"User Three"}
]

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

Answer 1

Разбудил вас Демонстрация Stackblitz

Если вы хотите манипулировать своими данными после ответа HTTP-клиента, вы можете сделать это, поиграв с операторами RxJS.После этих методов внутри канала, когда вы подписываетесь на его окончательное значение, он будет напрямую отображаться в вашем шаблоне.

this.httpClient
  .get('https://api.myjson.com/bins/n5p2m')
  .pipe(
    map(response => response.data),
    tap(users => console.log("users array", users))    // users array [Object, Object, Object]
  )
  .subscribe(users => this.users = users);

Если вы не хотите использовать операторы RxJS, вы все равно можете манипулировать им после того, как вы подписались на его окончательное значение и выполнить ручную манипуляцию данными

Нет необходимости выполнять .forEach () для хранения массива объектов из ваших response.data, поскольку Angular уже выполнил это для вас.Поэтому, когда бы вы ни присвоили его как

this.users = response.data, он будет хранить ваш массив объектов [Object, Object, Object]

this.httpClient
  .get('https://api.myjson.com/bins/n5p2m')
  .subscribe(response => this.users = response.data);  // This will directly store your response data in an array of objects.

Answer 2

Вы также можете хранить данные в массиве без цикла.

ngOnInit() {

  //Getting the data from json
  this.httpClient.get('https://api.myjson.com/bins/n5p2m').subscribe((response: any) => {      
    this.users.push(...response.data)
    console.log("users array", this.users);  
  })            
}

Answer 3

Angular может использовать Promises и Observables для обработки асинхронных операций, таких как запрос http get.Есть много информации об этой концепции, и вот хорошая отправная точка: Обещание против Наблюдаемого

Чтобы уточнить, вы можете заключить запрос http get в метод, который возвращает Observable, изатем подпишитесь на этот метод и дождитесь, пока он вернет результат, прежде чем выполнять инструкцию log.