7 угловой сервисный запас HttpClient на варибале в компоненте т.с

Question

В результате я получаю неопределенный ?? Я использую контакт Api, в сервисе получают данные по компоненту html, но когда я утешаю результат, я получаю неопределенный.

  element: any ;
  constructor(private service: BlockService) { }
   ngOnInit() {
        this.service.getSource().subscribe(async data=> {
        console.log(data)
        return  this.element  = await data
      })
    console.log(this.element )
  }

Answer 1

Это не так, как работает шаблон Observer, вы должны подписаться на поток данных наблюдателя для получения данных. и вы не можете получить данные, не подписавшись на них!

То есть внутри подписки оператор async или await не используется!

в этом сценарии вы можете иметь переменную вне рамок блока и присвоить значение после подписки наблюдателя

export class MyComponent {

  dataToPopulate: any = null;

  constructor(private service: BlockService) {}

  ngOnInit() {
    this.service.subscribe(
      data => dataToPopulate = {...data}, // for response 200 OK

      error => console.log(error), // handle network error here {400 or 500 etc}

      () => console.log(this.dataToPopulate) // complete callback hook
    )
  }

}

Pro tip : отмените подписку на ловушку уничтожения компонента, чтобы избежать утечки памяти

Существует еще один способ конвертировать Observable в Promise toPromise и использовать операторы async и await. Но для сетевых вызовов вам нужно блокировать try catch вокруг этих операторов, чтобы обнаружить ответы об ошибках сервиса, такие как 400 или 500

Answer 2

Попробуйте это

  element: any ;
  constructor(private service: BlockService) { }
   ngOnInit() {
        this.service.getSource().subscribe(data=> {
        console.log(data);
        this.element  = data;
        someMethod();
      })
  }
  someMethod(){
   //here you can use this.element data
  }

Answer 3

Вы можете использовать

  element: any;
  constructor(private service: BlockService) { }
  async ngOnInit() {
    this.element = await this.service.getSource().toPromise();
    console.log(this.element)
  }

Answer 4

Не думаю, что вам нужны ключевые слова async и await. Сервис по умолчанию асинхронный

  element: any;
  constructor(private service: BlockService) {}
  ngOnInit() {
    this.service.getSource().subscribe(data => {
      console.log(data); // will log the data
      this.element = data;
    });
    console.log(this.element) // will log null/undefined.
  }

EDIT:

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

1. код строителя
2. Код ngOnInit
3. Начало подписки (ожидание ответа)
4. console.log ( 'this.element').
5. Получил ответ от подписки, поэтому мы получаем данные, и this.element установлен.